title: Adding buttons to sencha Ext.tree.Panel
body: <p><strong>Situation:</strong></p>
  
  <p>My view has a <code>tabpanel</code> with 2 containers containing a <code>treePanel</code>.
  Some rows in the <code>treePanel</code> have to contain buttons.</p>
  
  <p>To add buttons to the <code>treeGrid</code> I use <code>render()</code>:</p>
  
  <p>Example:</p>
  
  <pre><code>var feedbackButtons =  new Array("Ok", "Cancel");
  var buttonText = '';
  line.set(gridView.m_columnIds[i], '&lt;div id="test" &gt;&lt;/div&gt;');
  
  line.commit();
  
  for (var nr in feedbackButtons) {
      Ext.create('Ext.Button',
      {
          text: feedbackButtons[nr],
          lineId: lineId,
          gridView: gridView,
          style: {
              display: 'inline-block',
              marginRight: '3px',
              backgroundColor: '#743'
          },
          handler: gridView._onButtonClicked
      }).render(document.body, 'test');
  }
  </code></pre>
  
  <p><strong>Problems:</strong></p>
  
  <p>Adding a row to an inactive (not shown) <code>treePanel</code> is resulting in a button with a height of 0px.</p>
  
  <p>Screenshot:
  <a href="http://img23.imageshack.us/img23/3492/sencha.png" rel="nofollow noreferrer">http://img23.imageshack.us/img23/3492/sencha.png</a></p>
  
  <p><strong>Current workaround:</strong></p>
  
  <p>Currently I'm ussing css to fix it:</p>
  
  <pre><code>Ext.util.CSS.createStyleSheet('button { height: 16px!important; } \n', null);
  </code></pre>
  
  <p>Has anyone a solution for this problem.</p>
  
  <p>I assume it is a bug!</p>