javascript - 居中对齐 - 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 选项来拉伸(stretch)它们。我还将按钮放入另一个容器中以将其粘在右侧。