EXTJS 4.0 Grid in Container doesn't load?

[mice-pace]

After a lot of debugging to find out what is wrong with my grid and why it isn't loading data from a store, the answer I've discovered is this... Nothing is wrong with my grid. When loaded on it's own it's just fine. Infact, when loaded as part of a viewport it is fine...

But the minute i load it inside a container (or a panel) it renders but fails to load the data.

Does anyone have any idea why this is the case and if there is any way to accomplish something similar? All I wanted to do was put a toolbar above it.

[sword-it]

Hi,

try following code :

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data: [
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
        {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
    ]
});


var grid=Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    tbar:[{text:'Save'}],
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })
    ]
  
});
var filterPanel = Ext.create('Ext.panel.Panel', {
    bodyPadding: 5,  // Don't want content to crunch against the borders
    width: 300,
    height:300,
    title: 'Filters',
    items: [
    	grid
    ],
    renderTo: Ext.getBody()
});