Align Center - EXTJS 4

Question

var loginForm = new Ext.form.FormPanel({
           frame: true,
           border: true,
           height: 155,
           width: 350,
           layout: {
            type: 'hbox',
            },
            items: [{
                     xtype: 'image',
                     src : 'images/system-users.png',
                     width: 100,
                   },{
                        xtype: 'container',

                        defaults: {
                            labelWidth: 80,

                        },
                        layout: {
                            type: 'vbox',
                            //align: 'stretch',
                            padding:'0 0 20 0'
                        },  
                       items: [{
                                 xtype: 'textfield',
                                 width: 250,
                                 id: 'username',
                                 fieldLabel: 'Username'
                               },{
                                 xtype: 'textfield',
                                 width: 250,
                                 id: 'password',
                                 fieldLabel: 'Password ',
                                 inputType: 'password',
                                 submitValue: false
                               },{
                                 xtype: 'hidden',
                                 id: 'challenge',
                                 value: "<?php echo $challenge; ?>",
                                 submitValue: false
                               },btnLogin],
           }
           ]//contain items    
         });

问题

这是一个现场演示http://jsfiddle.net/anthor/WM9DD/88/
1）如何对齐登录按钮的中心？
2）图像和所有文本框对齐窗口框的中心和中间。

Answer 1

试试这个：

var loginForm = new Ext.form.FormPanel({
 frame: true,
 border: true,
 layout: {
     type: 'hbox',
     align: 'stretch'
 },

 items: [{
     xtype: 'image',
     src: 'images/system-users.png',
     width: 100,
 }, {
     xtype: 'container',

     defaults: {
         labelWidth: 80,

     },
     layout: {
         type: 'vbox',
         align: 'stretch',
         padding: '0 0 20 0'
     },
     flex: 1,
     items: [{
         xtype: 'textfield',
         id: 'username',
         fieldLabel: 'Username'
     }, {
         xtype: 'textfield',
         id: 'password',
         fieldLabel: 'Password ',
         inputType: 'password',
         submitValue: false
     }, {
         xtype: 'hidden',
         id: 'challenge',
         value: "<?php echo $challenge; ?>",
         submitValue: false
     }, {
         xtype: 'container',
         layout: {
             type: 'hbox',
             pack: 'end'
         },
         items: [btnLogin]
     }],
 }] //contain items    
 });

在hbox布局中，您可以将align: 'stretch'选项和flex: 1选项添加到项目中以进行拉伸。我还将按钮放在另一个容器中，将其固定在右侧。