title: Center buttons horizontally of form
body: <p>Can somebody help me to center the buttons horizontally of a form? I don't know how I can give a vbox layout with align center to the button items.</p>
  
  <p>The following code is from <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Panel-cfg-buttons" rel="nofollow">Sencha Docs</a>.</p>
  
  <pre><code>Ext.create('Ext.form.Panel', {
  title: 'Simple Form',
  bodyPadding: 5,
  width: 350,
  
  // The form will submit an AJAX request to this URL when submitted
  url: 'save-form.php',
  
  // Fields will be arranged vertically, stretched to full width
  layout: 'anchor',
  defaults: {
      anchor: '100%'
  },
  
  // The fields
  defaultType: 'textfield',
  items: [{
      fieldLabel: 'First Name',
      name: 'first',
      allowBlank: false
  },{
      fieldLabel: 'Last Name',
      name: 'last',
      allowBlank: false
  }],
  
  // Reset and Submit buttons
  buttons: [{
      text: 'Reset',
      handler: function() {
          this.up('form').getForm().reset();
      }
  }, {
      text: 'Submit',
      formBind: true, //only enabled once the form is valid
      disabled: true,
      handler: function() {
          var form = this.up('form').getForm();
          if (form.isValid()) {
              form.submit({
                  success: function(form, action) {
                     Ext.Msg.alert('Success', action.result.msg);
                  },
                  failure: function(form, action) {
                      Ext.Msg.alert('Failed', action.result.msg);
                  }
              });
          }
      }
  }],
  renderTo: Ext.getBody()
  });
  </code></pre>
  
  <p>I thank you very much for your support!</p>
  
  <p>Kind regards, shub</p>