Comment centrer les champs de formulaire et les boutons de la barre d'outils?

Question

Je travaille dans extjs4. Je suis coincé à un point où je veux formater les éléments dans un panneau à une position centrale correctement. Mais je ne sais pas comment.

En fait, je veux afficher tous les éléments en position centrale pas quitté side..also Je veux afficher le bouton soumettre à la position centrale mais à avoir un affichage côté gauche .. Je suis face à ce problème ...

voici mon peu de 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 

Answer 1

Vous devez appliquer une mise en page HBox (avec le pack: « centre ») à votre forme et votre barre d'outils idem pour.

Vous pouvez voir un exemple de la façon dont cela est fait pour le formulaire here. Et pour la barre d'outils:

var toolbar = new Ext.Toolbar({ 
    dock: 'bottom', 
    layout:{ 
     pack: 'center' 
    }, 
    items: [{ 
     xtype: 'button', 
     text: 'foobar', 
     handler: function(){ 
      alert('ok'); 
     } 
    }] 
});