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

希望我把事情弄清楚了：）

在分隔的面板中创建两个网格-Ext JS

1 个答案: