title: Sencha Touch: How to center align two buttons in bottom docked toolbar?
body: <p>I was wondering how I would be able to center align two buttons in a bottom docked toolbar.  The only attribute that addresses this on the buttosn I saw was <code>centered</code> but that centers them absolutely overlapping the buttons, is there a way to group them in the center?</p>
  
  <p>Here is some code I have been working with:  <a href="http://www.senchafiddle.com/#xTZZg#k24Ni" rel="nofollow">http://www.senchafiddle.com/#xTZZg#k24Ni</a></p>
  
  <pre><code>Ext.Loader.setConfig({
      enabled: true
  });
  
  Ext.application({
      name: 'SenchaFiddle',
  
      launch: function () {
  
          var panelNewForm = Ext.create('Ext.Panel', {
              id: 'panelNewForm',
              title: 'TEST',
              html: 'TEST',
              pack: 'center',
              items: [{
                  xtype: 'toolbar',
                  docked: 'bottom',
                  layout: {
                      type: 'hbox',
                      align: 'center'
                  },
                  items: [{
                      ui: 'decline',
                      text: 'Cancel',
                      handler: function () {
  
                      }
                  }, {
                      ui: 'confirm',
                      text: 'Save',
                      handler: function () {
  
                      }
                  }]
              }]
          });
          Ext.Viewport.add(panelNewForm);
      }
  });
  </code></pre>