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()
    });
});

score 0 · Accepted Answer · answered Aug 23 '13 at 12:21

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/

it works :-) But i am facing a new problem... I got my grid on a hbox panel, sharing width with two more forms (labels for testing, but will take grids later). So when i dont use fixed width-values i can see only 4 columns. Hmm, i am just thinking about, that maybe the grid takes width of the whole window? Right now i got a window, containing 3 vbox container, and in the first vbox i got a hbox panel. First form inside is the grid, second a label, third also. I will take a look tomorrow at work, right now i can't — Roman, Aug 25 '13 at 19:59
got it! I used `forceFit: true` on the grid without fixed width's cells. Now grid takes whole width of the panel to display — Roman, Aug 26 '13 at 07:17
You can also add 'flex: 1' (or any number to change the percentage) to each column to make them all fit — Andrew Lapham, Aug 26 '13 at 17:10

score 0 · Answer 2 · answered Aug 23 '13 at 12:25

I see a number of problems here...

height and width config properties should not be capitalized
The flex, height, and width properties should all be on the panel itself, NOT on the panel's layout
The flex attribute will be weighted, so using flex: 1 on your button and flex: 2 on your panel will almost certainly not be what you are looking to do
You have renderTo on the grid, which is supposed to be inside your panel, so it should not use this config
You have commas at the ends of property lists, this can lead to lots of problems
You have type on a column, which is not a valid config
You don't need the layout on the grid

I can't tell exactly what it is that you want to do, but having an hbox layout with a button as the second item will look quite strange. But, if that is what you are intending, this is probably more what you want:

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

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

extjs 4 grid in hbox does not appear

2 Answers2