title: Sencha Touch: How to align buttons horizontally in an Ext.Panel?
body: <p>I'm trying to get two buttons to show up next to each other in an Ext.Panel.</p>
  
  <p>The .js code:</p>
  
  <pre><code>ProductView = new Ext.Panel({
      styleHtmlContent: true,
      scroll: 'vertical',
      items: [
          new Ext.DataView({
          scroll: false,
          store: productStore,
          tpl: productTpl,
          itemSelector: 'div.productView',
          }),
          {
              xtype: 'button',
              ui: 'blue-round',
              height: '60',
              text: 'Buy',
              handler: function() {
                  // ...
              }
          },{
              xtype: 'button',
              ui: 'green-round',
              height: '60',
              text: 'Share',
              handler: function() {
                  // ...
              }
          }
  
      ]
  });
  </code></pre>
  
  <p>The SCSS code:</p>
  
  <pre><code>@include sencha-button-ui('green', $branded-green);
  @include sencha-button-ui('blue', $branded-blue);
  </code></pre>
  
  <p>This yeilds buttons that look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/PLUbS.png" alt="Vertically-aligned buttons"></p>
  
  <p>I thought this may have been a sizing issue, but adding the <code>width: '40%',</code> attribute to each button only yields:</p>
  
  <p><img src="https://i.stack.imgur.com/h1cg4.png" alt="Smaller buttons"></p>
  
  <p>However, I'm wanting the buttons to sit next to each other instead of be stacked on top of each other. Any suggestions?</p>
  
  <p><strong>UPDATE:</strong>
  I tried to take advantage of the <code>align:</code> property, but this did nothing:</p>
  
  <pre><code>    {
          xtype: 'button',
          ui: 'blue-round',
          height: '60',
          width: '40%',
          align: 'left',
          text: 'Buy',
          handler: function() {
              // ...
          }
      },{
          xtype: 'button',
          ui: 'green-round',
          height: '60',
          width: '40%',
          align: 'right',
          text: 'Share',
          handler: function() {
              // ...
          }
      }
  </code></pre>