양식 필드와 도구 모음 단추를 가운데에 배치하는 방법은 무엇입니까?

Question

저는 extjs4에서 일하고 있습니다. 나는 패널의 항목을 중앙 위치에서 제대로 포맷하고 싶은 시점에 달라 붙는다. 하지만 어떻게해야할지 모르겠다.

사실 나는 디스플레이가 중심 위치에 버튼을 제출 싶지만이 왼쪽에 표시를 얻을 side..also하지 왼쪽 중간 위치에서 모든 항목을 표시 할 .. 나는이 문제에 직면하고있다 ... 도구 모음에 대한 귀하의 형태와 저두에 :

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

당신은 ('센터'팩)을 HBox 레이아웃을 적용해야합니다 :

여기 내 일부 코드입니다.

양식이 here 인 방법의 예를 볼 수 있습니다. 툴바의 경우 :

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