title: Sencha Touch: How to fit an Ext.Panel's toolbar to content?
body: <p>I have an <code>Ext.Panel</code> with a <code>'toolbar'</code> that will hold a variable amount of content in a <code>&lt;div&gt;</code> that I want to ensure is large enough to contain all content. Is there a way to dynamically size the toolbar to fit its content?</p>
  
  <p>When I add, say, multiple lines to the <code>&lt;div&gt;</code>, they are cut off. The <code>layout: 'fit'</code> property keeps it contained relative to the parent container, but how do I expand it to contain all child content?</p>
  
  <p>The toolbar is defined in a panel as follows (it is then added to a <code>'card'</code> Panel layout).</p>
  
  <pre><code>    var panelTitle = 'Old McStopher's Panel'
      this.listpanel = new Ext.Panel({
          title: panelTitle,
          items: this.list,
          layout: 'fit',
          dockedItems: {
              xtype: 'toolbar',
              html: '&lt;div class="statsTpl"&gt;Old McStopher's Content&lt;/div&gt;',
              title: panelTitle
          }
      });
  </code></pre>
  
  <p>I'm using SASS/SCSS. Is there a recommended way to do so with such? Or is there some property to set for the toolbar itself?</p>