Ext JS 5 - add grid panel to viewport

Question

I'm looking for a way to add a grid panel to my viewport, I tried to use the add() function but this didn't work for me.

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 in advance,

Answer 1

You just need to finsih your code and use the correct config & xtype.

I have copied your code and created a grid in this fiddle without any issues, code is also below in case the link breaks.

Ext.application({
    name: 'MyApp',

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

});