Create two grids in seperated panels - Ext JS

Question

I want to make two grids in two side-by-side panels. I tried with following code:

Ext.define('BlackWhiteList', {
    extend: 'Ext.panel.Panel',
    xtype: 'blackwhitelist',
    layout: {
        type: 'table',
        columns: 2,
        tableAttrs: {
            style: {
                width: '100%'
            }
        }
    },

    defaults: {
        border: false
    },

    fieldDefaults: {
        labelWidth: 110,
        anchor: '100%'
    },

    items: [{
            title: 'Black List',
            cls: 'blackList',
            items: [
                grid
            ]
        },
        {
            title: 'White List',
            items: [
                grid
            ]
        }

    ]
});


var store = Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ]

});

But at the moment in only shows me the title "Black List" and "White List" with empty content. I get no error messages or anything which can show me what is wrong here.

I use ExtJS 6.

Answer 1

This is really a tricky question, You will need to fix 2 things in your code so that your code work.

First is how you are defining the grid and where you used it, the a/m code will yield undefined value for the grid by the time of execution. why? this is related to hoisting in JS, the JS will recognize the grid variable but will not assign it's value so when you are creating your Ext panel you have grid value equals to undefined.

So first thing is to move the var grid block of code to the top.

But now you will face a 2nd problem you will see only one grid is rendered, why?

Because the grid is an object which is reference type, and this will make the two panels try to show the same grid and this is impossible so it is shown only on one place.

So to fix this problem you need to use Ext.define for the grid and assign xtype to it, so when you use xtype in the panel more than one time Ext will create 2 complete diffrent instance of your grid. Or you can make var grid1 and var grid2 but this is not good

Finally a working example Fiddle

Code Sample

App.js

Ext.application({
name: 'Test',
requires: ['Test.MyGrid'],
launch: function () {
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        layout: {
            type: 'table',
            columns: 2,
            tableAttrs: {
                style: {
                    width: '100%'
                }
            }
        },

        defaults: {
            border: false
        },

        fieldDefaults: {
            labelWidth: 110,
            anchor: '100%'
        },

        items: [{
                title: 'Black List',
                cls: 'blackList',
                items: [{
                    xtype: 'myGrid'
                }]
            }, {
                title: 'White List',
                items: [{
                    xtype: 'myGrid'
                }]
            }

        ]
    });
}
});

app/MyGrid.js

var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [
    { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
    { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
    { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
    { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});

Ext.define('Test.MyGrid', {
    extend:'Ext.grid.Panel',
    store: store,
    xtype:'myGrid',
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ]
    });

Hope I made things clear :)