1

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.

Tetsujin no Oni
  • 7,300
  • 2
  • 29
  • 46
Armaan
  • 205
  • 10
  • 21
  • 1
    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 Mar 12 '12 at 14:13
  • Hi Eric,Yes, i have tried that as well. Same result. – Armaan Mar 12 '12 at 14:32
  • Can you post a screenshot of what's happing with your current layout? – sha Mar 12 '12 at 14:45
  • 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 Mar 12 '12 at 15:02
  • @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 Mar 12 '12 at 15:09
  • @Eric: usually grids should fit all remaining space inside the panel. you don't have to fill it with dummy records... – sha Mar 12 '12 at 15:10
  • @sha apologies for that.I have a window with a vbox layout having two panels.The top panel is set to have a layout of 'border'. Then theres another panel in the west region of this container and that is the one that has a textfield within a form and then the grid im having problems with. – Armaan Mar 12 '12 at 16:11
  • check Eric's answer then. I think he pointed you to the right direction. – sha Mar 12 '12 at 16:33

1 Answers1

4

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.

Eric
  • 6,965
  • 26
  • 32