extjs 4 grid in hbox does not appear

Question

I dont know what to do... Without hbox the grid appears, but with hbox not.

I added with & height and flex to each child element, but it doesnt work...

Thanks in advance!

And here's the code:

Ext.onReady(function() {
    var myStore = Ext.create('Ext.data.SimpleStore', {
        fields: [   'bMin', ], });   

    var myData = [ { "bMin": 10, } ];

    myStore.loadData(myData);

    var grid = new Ext.grid.GridPanel({
        layout : { type  : 'hbox', align : 'stretch', flex:2,
        Height: 150,
        Width: 300,
        },
        cls: 'custom-grid',
        store: myStore,
        columns: [

            {text: "bMin", dataIndex: 'bMin', type: 'float',},
        ],
        viewConfig: {
        emptyText: 'No records',
        forceFit : true,
        },
        renderTo: Ext.getBody(),
    });

    var myPanel = new Ext.Panel({
        layout : {
        type  : 'hbox',
        align : 'stretch',
        },
        title: 'Hello',
        minHeight : 150,
        minWidth: 300,
        Height: 150,
        Width: 300,
        items: [
            grid,
            {xtype: 'button', width: 50, height: 50, flex: 1}
        ],
        renderTo: Ext.getBody()
    });
});

Answer 1

On the Grid you don't need a 'layout' config, also when using an HBox Height and Width is ignored on the child components so using flex is the way to go. I also added a 'pack' attribute to the hbox layout.

Try this:

Ext.onReady(function() {
    var myStore = Ext.create('Ext.data.SimpleStore', {
        fields: [   'bMin', ], });   

    var myData = [ { "bMin": 10, } ];

    myStore.loadData(myData);

    var grid = new Ext.grid.GridPanel({
        flex: 1,
        cls: 'custom-grid',
        store: myStore,
        columns: [
            {text: "bMin", dataIndex: 'bMin', type: 'float',},
        ],
        viewConfig: {
        emptyText: 'No records',
        forceFit : true,
        },
        renderTo: Ext.getBody(),
    });

    var myPanel = new Ext.Panel({
        layout : {
            type  : 'hbox',
            align : 'stretch',
            pack: 'start'
        },
        title: 'Hello',
        minHeight : 150,
        minWidth: 300,
        Height: 150,
        Width: 300,
        items: [
            grid,
            {xtype: 'button', flex: 1, text: 'test'}
        ],
        renderTo: Ext.getBody()
    });
});

JSFiddle Example: http://jsfiddle.net/vzURb/2/