Search code examples
extjsextjs4

ExtJS accordion GridPanels with different height

I have an accordion panel that holds 3 GridPanels. When the page is displayed for the first time, the first two panels are expanded, and the last one collapsed.

Is it possible to make the first GridPanel slightly bigger than the other two?

@lmno :

xtype: 'container',
flex: 2,
layout: { type: 'accordion', border: false, multi: true },
items: [
    { xtype: 'myGrid' },
    { xtype: 'pendingGrid' }
]

You can set the multi property of Ext.layout.container.Accordion to true to enable multiple accordion items to be open at once.

After that, you can play around with collapsed and collapsible Grid properties.

Solution

  • The answer to this is using the fill property for the accordion parent container. Child items can then use the flex property or have their heights specified in another way.

    http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.layout.container.Accordion-cfg-fill