JSFiddle - React, Tailwind, and code Playground

by alexrom7

HTML

<link rel="stylesheet" type="text/css" href="//cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-debug.css"
/>

JavaScript

var data = [
    {
        id: 1,
        name: 'Twingo',
        manufacturer: {
            id: 1,
            name: 'Renault'
        }
    },
    {
        id: 2,
        name: 'Scenic',
        manufacturer: {
            id: 1,
            name: 'Renault'
        }
    },
    {
        id: 2,
        name: 'Corsa',
        manufacturer: {
            id: 1,
            name: 'Chevrolet'
        }
    }

           ];


Ext.define('Product', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'},
        {name: 'manufacturer_name', mapping: 'manufacturer.name'},
        {name: 'manufacturer_id', mapping: 'manufacturer.id'}
    ],
});

Ext.create('Ext.data.Store', {
    storeId:'Products',
    model: "Product",
    data: data,
    autoLoad: true,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json'
        }
    }
});


Ext.create('Ext.grid.Panel', {
    title: 'Products',
    renderTo: Ext.getBody(),
    store: Ext.getStore('Products'),
    columns: [
        {text: 'Id', dataIndex: 'id', sortable: true},
        {text: 'Name',  dataIndex: 'name', sortable: true},
        {text: 'Manufacturer', dataIndex: 'manufacturer_name', sortable: true},
    ],
});