ExtJS 5-将网格面板添加到视口中

您只需要完成代码并使用正确的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: ''
                }
            }]
        });
    }
});