title: Adding a collapsed panel to a window causes a rendering error in Ext JS 4
body: <p>I'm following examples in the "ExtJS in Action" book and I ran into a problem with one of them. The code intends to add new panels to a window, unfortunately when the panels being added are collapsed by default, they are not rendered correctly.</p>
  
  <p>Here is the code in question:</p>
  
  <pre class="lang-js prettyprint-override"><code>var childPnl1 = {
      frame: true,
      height: 50,
      html: 'My First Child Panel',
      title: 'First children are fun'
  };
  
  var myWin = new Ext.Window({
      height: 300,
      width: 300,
      title: 'A window with a container layout',
      autoScroll: true,
      items: [
          childPnl1
          ],
      tbar: [
          {
          text: 'Add child',
          handler: function() {
              var numItems = myWin.items.getCount() + 1;
              myWin.add({
                  title: 'Child number ' + numItems,
                  height: 60,
                  frame: true,
                  collapsible: true,
                  collapsed: true,
                  html: 'Yay, another child!'
              });
              myWin.doLayout();
          }}
      ]
  });
  myWin.show();
  </code></pre>
  
  <p>When I run it, I get the result presented in this fiddle:
  <a href="http://jsfiddle.net/PHaP4/" rel="nofollow">http://jsfiddle.net/PHaP4/</a></p>
  
  <p>When I hit the 'Add child' button, the collapsed panels are rendered as very narrow elements, as if width was not properly set.</p>
  
  <p>Is this a bug in Ext or is there a new way of doing this properly in ExtJS4?</p>