javascript - 在单独的面板中创建两个网格 - 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 grid 代码块移到顶部。

但是现在您将面临第二个问题，您将看到只渲染了一个网格，为什么？

因为网格是一个引用类型的对象，这会使两个面板试图显示相同的网格，这是不可能的，所以它只显示在一个地方。

因此，要解决此问题，您需要为网格使用 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'
                }]
            }

        ]
    });
}
});

应用程序/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' }
    ]
    });

希望我说清楚了:)