如何在extJS的面板中打开网格？

Question

I want to open a grid in Ext.Panel . This is what I tried-

Var grid = Ext.create('Ext.grid.Panel', {
store: Ext.data.StoreManager.lookup('StoreId'),
columns: [
    { header: 'Resort', dataIndex: 'resort' },
    { header: 'Arrival', dataIndex: 'arrival' },
    { header: 'Guest', dataIndex: 'guest', flex: 1 }
]
renderTo: Ext.getBody()
});

Var panel = new Ext.Panel({
title: 'Accompanying Guest(s)',  
id: 'panel',    
items: [grid]
});

And I want to open this panel in a window -

var win = new Ext.Window({
                    layout: 'fit',
                    width: 900,
                    height: 600,
                    closeAction: 'hide',
                    plain: true,
                    items: [panel]
                });

Whats wrong in my code?

Answer 1

var win = new Ext.Window({
    autoShow: true,
    layout: 'fit',
    width: 900,
    height: 600,
    closeAction: 'hide',
    plain: true,
    items: [{
        xtype: 'gridpanel',
        title: 'Accompanying Guest(s)',
        store: Ext.data.StoreManager.lookup('StoreId'),
        columns: [{
            header: 'Resort',
            dataIndex: 'resort'
        }, {
            header: 'Arrival',
            dataIndex: 'arrival'
        }, {
            header: 'Guest',
            dataIndex: 'guest',
            flex: 1
        }]
    }]
});

Where do I start...

1. Don't use renderTo if you're putting an item inside a container.
2. You've given the panel a border layout with a center region.
3. The border layout isn't necessary, using fit will do.
4. You've declared dimensions on the grid, but they will be provided by the fit layout.
5. Over-nesting. The grid ~is a~ panel, there's no point nesting it inside another panel. Put the title on the grid panel itself.