Создайте две сетки в отдельных панелях - Ext JS

Question

Я хочу сделать две сетки в двух соседних панелях.Я пытался с помощью следующего кода:

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' }
    ]

});

Но на данный момент только показывает мне заголовок "Черный список" и "Белый список" с пустым содержимым.Я не получаю сообщений об ошибках или чего-либо, что может показать мне, что здесь не так.

Я использую ExtJS 6.

Answer 1

Это действительно сложный вопрос, вам нужно исправить 2 вещи в вашем коде, чтобы ваш код работал.

Во-первых, как вы определяете сетку и где вы ее использовали, a / mКод выдаст неопределенное значение для сетки к моменту выполнения.Зачем?это связано с подъемом в JS, JS распознает переменную сетки, но не назначит ее значение, поэтому при создании панели Ext у вас будет значение сетки, равное неопределенному.

Итак, первое, что нужно переместить:блок кода сетки var наверх.

Но теперь вы столкнетесь со второй проблемой, вы увидите, что отображается только одна сетка, почему?

Поскольку сетка является объектом, который является ссылочным типом, и это заставит две панели пытаться показать одну и ту же сетку, и это невозможно, поэтому она отображается только в одном месте.

Так что, чтобы решить эту проблему, вам нужно использовать Ext.define для сетки и назначитьxtype к нему, поэтому, когда вы используете xtype на панели более одного раза, Ext создаст 2 полных различных экземпляра вашей сетки.Или вы можете сделать var grid1 и var grid2, но это не хорошо

Наконец-то рабочий пример Fiddle

Пример кода

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' }
    ]
    });

Надеюсь, я все прояснил:)