Ext JS 5 - 將網格面板添加到視口

Question

我正在尋找一種方法來向我的視口添加網格面板，我嘗試使用add（）函數，但這對我不起作用。

Ext.application（{name：'MyApp'，

launch : function() {
       Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            html: '<h1 class="x-panel-header">Page Title</h1>',
            border: false,
            margin: '0 0 5 0'
        }, {
            region: 'west',
            title: 'Navigation',
            width: 250,
            collapsible: false,
            items : {
                // I want to add it just there  
                xtype : 'gridPanel'
            }
        }, {
            region: 'south',
            title: 'South Panel',
            collapsible: true,
            html: 'test test',
            split: true,
            height: 100,
            minHeight: 100
        }, {
            region: 'east',
            title: 'East Panel',
            collapsible: true,
            split: true,
            width: 150
        }, {
            region: 'center',
            xtype: 'tabpanel', 
            activeTab: 0,      
            items: {
                title: 'test Tab',
                html: ''
            }
        }]
    });
}

}）;

提前thx，

Answer 1

您只需要finsih您的代碼並使用正確的config＆xtype。

我已經復制了你的代碼並在這個小提琴中創建了一個沒有任何問題的網格，如果鏈接斷開，代碼也在下面。

Ext.application({
    name: 'MyApp',

    launch: function() {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: {
                'items': [{
                    '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"
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [{
                region: 'north',
                html: '<h1 class="x-panel-header">Page Title</h1>',
                border: false,
                margin: '0 0 5 0'
            }, {
                region: 'west',
                title: 'Navigation',
                width: 250,
                collapsible: false,
                items: {
                    // I want to add it just there  
                    xtype: 'grid',
                    title: 'Simpsons',
                    store: Ext.data.StoreManager.lookup('simpsonsStore'),
                    columns: [{
                        text: 'Name',
                        dataIndex: 'name'
                    }, {
                        text: 'Email',
                        dataIndex: 'email',
                        flex: 1
                    }, {
                        text: 'Phone',
                        dataIndex: 'phone'
                    }],
                    listeners: {
                        rowdblclick: function(grid, record, tr, rowIndex, e, eOpts) {
                            alert(record.get("name"));
                        }
                    },
                    height: 200,
                    width: 400,
                }
            }, {
                region: 'south',
                title: 'South Panel',
                collapsible: true,
                html: 'test test',
                split: true,
                height: 100,
                minHeight: 100
            }, {
                region: 'east',
                title: 'East Panel',
                collapsible: true,
                split: true,
                width: 150
            }, {
                region: 'center',
                xtype: 'tabpanel',
                activeTab: 0,
                items: {
                    title: 'test Tab',
                    html: ''
                }
            }]
        });
    }

});