JSFiddle - React, Tailwind, and code Playground

by Alexander Tymchuk

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.2.0-gpl/resources/ext-theme-gray/ext-theme-gray-all.css">
<!--link href="//extjs.cachefly.net/ext-4.2.0-gpl/resources/ext-theme-gray/ext-theme-gray-all.css" rel="stylesheet" /-->

JavaScript

Ext.define('My.store.Contacts', {
    extend: 'Ext.data.Store',
    storeId: 'Contacts',
    fields: [
        'name',
        'phone'
        ],
    data: [
        {
        name: "neil",
        phone: "6045551212"},
    {
        name: "frank",
        phone: "6045551213"}
    ],
    autoLoad: true
});

Ext.define('My.store.Orders', {
    extend: 'Ext.data.Store',
    storeId: 'Orders',
    fields: [
        'product',
    {
        name: 'quantity',
        type: 'int'}
    ],
    data: [
        {
        product: "Deez Brand Nuts",
        quantity: 2},
    {
        product: "iPhone 5",
        quantity: 20}
    ],
    autoLoad: true
});

Ext.define('My.view.ContactsGrid', {
    extend: 'Ext.grid.Panel',
    alias:'widget.contacts-grid',

    height: 250,
    width: 400,
    title: 'Contacts',
    store: 'Contacts',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'name',
                    text: 'Name'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'phone',
                    text: 'Phone'
                }
            ],
            viewConfig: {

            }
        });

        me.callParent(arguments);
    }
});

Ext.define('My.view.OrdersGrid', {
    extend: 'Ext.grid.Panel',
    alias:'widget.orders-grid',

    height: 250,
    width: 400,
    title: 'Orders',
    store: 'Orders',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'product',
                    text: 'Product'
                },
                {
                    xtype: 'numbercolumn',
                    dataIndex: 'quantity',
                    text: 'Quantity'
                }
            ],
            viewConfig: {

    ...