EXTJS中如何给选项卡内创建grid万分感激！

Question

我现在选项卡内有两项a，b
现在想给a和b中各创建一个不同的grid
一直不成功，那位可以给贴个代码或说下解决办法，万分感激！

Answer 1

用 Extjs Designer 直接拖进去即可。

Answer 2

{
    xtype: 'tabpanel',
    activeTab: 1,
    width: 400,
    height: 250,
    items: [
        {
            xtype: 'panel',
            title: 'Tab 1',
            items: [
                {
                    xtype: 'grid',
                    title: 'My Grid',
                    height: 217,
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'string',
                            header: 'Column',
                            sortable: true,
                            width: 100
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'number',
                            header: 'Column',
                            sortable: true,
                            width: 100,
                            align: 'right'
                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'date',
                            header: 'Column',
                            sortable: true,
                            width: 100
                        },
                        {
                            xtype: 'booleancolumn',
                            dataIndex: 'bool',
                            header: 'Column',
                            sortable: true,
                            width: 100
                        }
                    ]
                }
            ]
        },
        {
            xtype: 'panel',
            title: 'Tab 2',
            items: [
                {
                    xtype: 'grid',
                    title: 'My Grid',
                    height: 215,
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'string',
                            header: 'Column',
                            sortable: true,
                            width: 100
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'number',
                            header: 'Column',
                            sortable: true,
                            width: 100,
                            align: 'right'
                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'date',
                            header: 'Column',
                            sortable: true,
                            width: 100
                        },
                        {
                            xtype: 'booleancolumn',
                            dataIndex: 'bool',
                            header: 'Column',
                            sortable: true,
                            width: 100
                        }
                    ]
                }
            ]
        }
    ]
}这里store你自己写，监听gridpanel的active事件，然后加载store

Answer 3

ext4Ext.onReady(function() {
    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                "name": "Lisa",
                "email": "[email protected]",
                "phone": "555-111-1224"            },
            {
                "name": "Bart",
                "email": "[email protected]",
                "phone": "555--222-1234"            },
            {
                "name": "Homer",
                "email": "[email protected]",
                "phone": "555-222-1244"            },
            {
                "name": "Marge",
                "email": "[email protected]",
                "phone": "555-222-1254"            }]        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'            }        }    });
    var grid1 = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            header: 'Name',
            dataIndex: 'name'        },
        {
            header: 'Email',
            dataIndex: 'email',
            flex: 1        },
        {
            header: 'Phone',
            dataIndex: 'phone'        }],
        height: 200,
        width: 400
    });    var grid2 = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            header: 'Name',
            dataIndex: 'name'        },
        {
            header: 'Email',
            dataIndex: 'email',
            flex: 1        },
        {
            header: 'Phone',
            dataIndex: 'phone'        }],
        height: 200,
        width: 400
    });
    var tabs = Ext.createWidget('tabpanel', {
        renderTo: 'tabs1',
        width: 450,
        activeTab: 0,
        defaults: {
            bodyPadding: 10        },
        items: [{
            items: grid1,
            title: 'A',
            closable: true        },
        {
            items: grid2,
            title: 'B',
        }]    });});<body> <div id="tabs1">
        <div id="a">
            
        </div>
        <div id="b">
           
        </div>
    </div></body>