title: How to center form fields and toolbar buttons?
body: <p>I am working in extjs4. I am geting stuck at a point where I want to format items in a panel at a center position properly. But I don't know how.</p>
  
  <p><img src="https://i.stack.imgur.com/sdBDZ.jpg" alt="Here Is my registarion form view"></p>
  
  <p>Actually I want to display all items at middle position not left side..also I want display submit button at center position but it get display at left side.. I am facing this problem...</p>
  
  <p>here Is my some code :</p>
  
  <pre><code>Ext.define('Am.user.Registration',  {
      extend:'Ext.form.Panel',
      //extend:'Ext.window.Window',
      id:'registationId',
      alias:'widget.Registration',
      title:'Registration form',
      resizable:false,
      buttonAlign:'center',
      closable:true,
      titleAlign:'center',
      //autoScroll:true,
      draggable:false,
      //shadow:true,
      height:350,
      width:800,
      floating:true,
      bodyPadding: 30,
      //collapsible:true,
      requires:[
               'Balaee.view.sn.user.Captcha'
                ], 
       defaults:{
          //align:'center'
          defaultAlign:'t1-c'
       },         
       //bodyStyle: 'align:center',        
     // Ext.require(['Ext.form.field.Date']);
      items:[
      {
          xtype:'combo',
          fieldLabel:'Language',
          name:'language',
          emptyText: 'Language',
          store: ['Marathi','Hindi','English'],
          queryMode: 'local',
          editable:false
      }, 
      {
          xtype: 'fieldcontainer',
          fieldLabel: 'Name',
          layout: 'hbox',
          combineErrors: true,
          defaults: {
              hideLabel: true
          },
          items: [
              {xtype: 'textfield',    fieldLabel: 'First', name: 'firstName', emptyText: 'First name',width: 80,  allowBlank: false,margins: '0 5 0 0'},
              {xtype: 'textfield',    fieldLabel: 'Middle', name: 'middleName',emptyText: 'Middle name', width: 80, allowBlank: true, margins: '0 5 0 0'},
              {xtype: 'textfield',    fieldLabel: 'Last', name: 'lastName', emptyText: 'Last name',width: 80, allowBlank: false,
                  validator: function(value) {
                      var password1 = this.previousSibling('[name=firstName]');
                      return (!(value === password1.getValue())) ? true : 'Dont give first name and last name same.'
                  }                           
              }
          ]
      },
      {
          xtype:'textfield',
          fieldLabel:'Primary email',
          name:'primaryEmail',
          //anchor:'100%',
          allowBlank:false,
          emptyText: 'Email',
          vtype:'email'
          //labelAlign:'right',
      },
      ---------------
      --------------
      ],//End of items square
  //  buttons:[{
  //      xtype:'button',
  //          formBind: true,
  //          fieldLabel:'submitttttttt',
  //          action:'submitAction',
  //          text:'Submit',
  //          defaultAlign:'t1-c'
  //  }   
  //  ],
      bbar:
      [
          {
              xtype:'button',
              formBind: true,
              fieldLabel:'submit',
              action:'submitAction',
              text:'Submit',
              defaultAlign:'t1-c'
              //flex:6,
          },
      ],//End of buttons square
  });// End of login class
  </code></pre>