title: ExtJS 4.2 Collapsible Panel Expand strange visual behavior
body: <p>I'm getting a strange behavior with a <code>Panel</code> that is collapsible.</p>
  
  <p>My app is running on 4.2.1, but I have create a <code>JSFiddle</code> to simulate the issue:</p>
  
  <p><strong>UPDATE</strong>
  I create Sencha Fiddle (better) <a href="https://fiddle.sencha.com/#fiddle/7vk" rel="nofollow">https://fiddle.sencha.com/#fiddle/7vk</a></p>
  
  <p>I have a main panel that holds two items: a Grid with <code>flex: 1</code> and a Panel in the bottom that is <code>collapsible</code>.</p>
  
  <pre><code>var grid = Ext.create('Ext.grid.Panel',{
          title:'Grid',
          flex: 1,
          columns:[]
      });
  
      var panel = Ext.create('Ext.panel.Panel',{
          renderTo: Ext.getBody(),
          title:'Hola',
           layout: {
          type: 'vbox',
          align: 'stretch'
      },
          items: [
              {
                  xtype: 'grid',
                  padding: 10,
                  title: 'test',
                  columns:[],
                  flex: 1,
                  border: 1
              },
              {
                  xtype: 'panel',
                  padding: 10,
                  title: 'test',
                  collapsible: true,
              collapsed: true,
              height: 300,
  
                  border: 1
              }
          ]
  });
  </code></pre>
  
  <blockquote>
    <p>When you expand the panel it the <strong>animation</strong> goes to the top of the view and then goes down. Very strange.</p>
  </blockquote>
  
  <p>Any clue?</p>