如何使表单域和工具栏按钮居中？答案

【问题标题】：How to center form fields and toolbar buttons?如何使表单域和工具栏按钮居中？
【发布时间】：2013-03-08 12:40:00
【问题描述】：

我在 extjs4 工作。我被困在我想在面板中正确格式化中心位置的项目的地方。但我不知道怎么做。

实际上我想在中间位置而不是左侧显示所有项目..我也想在中心位置显示提交按钮，但它在左侧显示..我正面临这个问题......

这是我的一些代码：

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

【问题讨论】：

标签： extjs extjs4.1 extjs-mvc

【解决方案1】：

您应该将 HBox 布局（带有 pack: 'center'）应用到您的表单和工具栏上。

您可以看到一个示例，说明如何为表单 here 完成此操作。对于工具栏：

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

【讨论】：