1

私は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
4

1 に答える 1

2

フォームにHBoxレイアウト（パック：'center'）を適用し、ツールバーにも同じように適用する必要があります。

ここで、フォームに対してこれがどのように行われるかの例を見ることができます。そしてツールバーの場合：

var toolbar = new Ext.Toolbar({
    dock: 'bottom',
    layout:{
        pack: 'center'
    },
    items: [{
        xtype: 'button',
        text: 'foobar',
        handler: function(){
           alert('ok');
        }
    }]
});
于 2013-03-08T13:25:22.183 に答える