ExtJS 4.2 Panel Refresh on Collapse

Question

I have two grids nested in a panel with an anchor layout, something like this:

var tabs = Ext.widget('tabpanel', {
    layout: 'fit',
    activeTab: 0,
    plain: true,
    margin: 1,
    items: [gridOne, gridTwo]
});

var gridOne = {
    xtype: 'grid',
    id: 'gridOne',
    collapsible: true,
    border: 1,
    anchor: '100% 50%',
    enableColumnMove: false,
    colModel: colModel,
    store: storeOne,
    listeners: {
        scope: this,
        collapse: function() {
            var obj = Ext.getCmp('gridTwo');
            Ext.apply(obj, {anchor: '100% 100%'});
            obj.doLayout()
        }
    }

};

var gridTwo = {
    xtype: 'grid',
    id: 'gridTwo',
    collapsible: true,
    border: 1,
    anchor: '100% 50%',
    enableColumnMove: false,
    colModel: colModel,
    store: storeTwo
};

As you might imagine, these are two grids laid out with gridOne on top of gridTwo. Both are collapsible. As you can see from the listener in gridOne, I would like to extend the height of gridTwo to take up the entire height of the parent container when grid one is collapsed.

The listener code in gridOne is what I think should work but it is not. I have also thought about using the Accordion layout but I'm not sure that I can get the effect of having two grids on top of each other like I can with the Anchor layout.

So my question boils down to how I can extend the height of gridTwo to 100% of the parent container when collapsing gridOne.

score 0 · Accepted Answer · answered Nov 03 '13 at 15:28

Actually, I wouldn't imagine that the grids are on top of each other. If you're using a TabPanel and adding grids to it, each grid should be in its own tab. If they are showing on top of one another, that would seem to signal that you have a problem with your component's configuration.

However, to accomplish what you're wanting, there shouldn't be a need to key on the collapse/expand event. Ext JS already has layout managers that will do this for you. For example, if you add the grids to container or panel that has a Ext.layout.container.VBox layout, you can specify the flex property on each child and define precisely how much of the available vertical space should be taken up by that component. The nice part is that if you do collapse one of the children, the flex configuration of the other children will take over and fill in the space, and the same when the component is expanded.

Be sure to check out the layout examples in the documentation, and here's a quick demo I put together.

Thanks very much for the example which works well. The challenge I've had is to extend the container that contains the two grids to 100% of the parent container as opposed to a fixed height in pixels. That's why I was using the anchor layout. Any thoughts on how to extend to 100%? — Jason Strimpel, Nov 03 '13 at 21:19

ExtJS 4.2 Panel Refresh on Collapse

1 Answers1