Ext JS Grid doesnt fill panel even with 'fit' layout

Question

I'm trying to get a grid to occupy the entire space within a panel and after having searched through this forum i read that a fit layout should help with such a case. However, i'm still having problems getting it to do so.

         {
            xtype:'panel',
            layout:'fit',
            items: [{
                     xtype: 'grid',
                     store: 'DimensionStore',
                     id: 'dimension-grid',
                     padding: '0 5 0 5',
                     viewConfig: { emptyText: '<div style="padding:10px;">No dimensions found...</div>' },
                     columns: [{ 
                                header: 'Name', dataIndex: 'DimensionName', flex: 2 
                              }]
                     }
                  }]
         }

The only way it works is to set an absolute height for the grid,but that defeats the purpose since the panel + grid lies within a window that is expandable and doesnt look nice when it does get expanded.

Grids are themselves panels, so you shouldn't need a panel to hold another panel. Have you tried removing the top-level panel in your example and simply use a grid with fit layout? — Eric
Can you post a screenshot of what's happing with your current layout? — sha
I think it's actually working correctly. Since there's not enough rows to trigger a scroll bar, it uses the standard row height and fills whatever space it can. What happens when you try loading in about 20 dummy records? — Eric
@Armaan: this is not how your code looks like. where did you get additional textbox? From what you posted looks like you have a container, inside you a have a textbox, and then a panel and a grid. your panel has layout 'fit', but what about your container? — sha

Eric Eric · Accepted Answer · 2012-03-12T15:46:16

Based on the image you showed us, it looks like the layout issue is with the top "Dimensions" panel containing your text field and grid. That's actually the component in charge of layout here, not the grid.

There are a couple things you can do, depending on how you intend for this to be used. The easiest solution would be to use a "vbox" layout. The "Dimensions" panel would have two items, one for a panel with a fixed height containing your text field, the other containing your grid with a flex of 1. That way, the grid will fill the remaining area.

Ext.layout.container.VBox documentation

You could also use a border layout with your text field as the "north" region and your grid as the "center" region with "fit" layout, which will accomplish the same thing.

Ext.layout.container.Border documentation

This is all based off your limited code sample and linked image. You may need to provide a more complete code example to facilitate further assistance.

Ext JS Grid doesnt fill panel even with 'fit' layout

1 Answers