title: ExtJS 4.2 Panel Refresh on Collapse
body: <p>I have two grids nested in a panel with an anchor layout, something like this:</p>
  
  <pre><code>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
  };
  </code></pre>
  
  <p>As you might imagine, these are two grids laid out with <code>gridOne</code> on top of <code>gridTwo</code>. Both are collapsible. As you can see from the listener in <code>gridOne</code>, I would like to extend the height of <code>gridTwo</code> to take up the entire height of the parent container when grid one is collapsed.</p>
  
  <p>The listener code in <code>gridOne</code> 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.</p>
  
  <p>So my question boils down to how I can extend the height of <code>gridTwo</code> to 100% of the parent container when collapsing <code>gridOne</code>.</p>