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

Posted 2023-02-26

【中文标题】如何使表单域和工具栏按钮居中？

【英文标题】：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

【参考方案1】：

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

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

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