代码之家 › 专栏 › 技术社区 › harunB10

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

extjs javascript

harunB10 · 技术社区 · 7 年前

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

});

我使用extjs6。

1 回复 | 直到 7 年前

Moataz Sanad 7 年前

这确实是一个棘手的问题,您需要在代码中修复两个问题,以便代码正常工作。

首先是如何定义网格以及在何处使用网格,在执行时,a/m代码将为网格生成未定义的值。为什么?这与JS中的提升有关,JS将识别grid变量,但不会指定它的值,因此在创建Ext面板时,grid值等于undefined。

因此,要解决这个问题,您需要为网格使用Ext.define并为其指定xtype,因此当您在面板中多次使用xtype时,Ext将创建两个完全不同的网格实例。或者你可以做vargrid1和vargrid2,但这并不好

最后是一个工作实例 Fiddle

代码示例

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

希望我把事情说清楚:)