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.

Answer 1

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.