Ext JS 5 - 将网格面板添加到视口答案

【问题标题】：Ext JS 5 - add grid panel to viewportExt JS 5 - 将网格面板添加到视口
【发布时间】：2015-02-21 16:23:40
【问题描述】：

我正在寻找一种将网格面板添加到我的视口的方法，我尝试使用 add() 函数，但这对我不起作用。

Ext.应用程序（{ 名称：“我的应用”，

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

});

提前谢谢，

【问题讨论】：

您已经为网格尝试了哪些配置代码？可以分享一下吗

标签： javascript extjs viewport gridpanel

【解决方案1】：

您只需要完成您的代码并使用正确的配置和 xtype。

我已复制您的代码并在此 fiddle 中创建了一个网格，没有任何问题，代码也在下方，以防链接中断。

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

});

【讨论】：