Javascript 对齐中心-EXTJS 4 var loginForm=new Ext.form.FormPanel({ 框架：对， 边界：是的， 身高：155， 宽度：350， 布局：{ 类型：“hbox”， }, 项目：[{ xtype:'图像'， src:'images/system users.png'， 宽度：100， },{ xtype:'容器'， 默认值：{ 标签宽度：80， }, 布局：{ 键入：“vbox”， //对齐：“拉伸”， 填充：“0 20 0” }, 项目：[{ xtype:'textfield'， 宽度：250， id:'用户名'， 字段标签：“用户名” },{ xtype:'textfield'， 宽度：250， id:'密码'， fieldLabel:“密码”， 输入类型：“密码”， 次值：false },{ xtype:'隐藏'， id:“挑战”， 值：“”， 次值：false }，btnLogin]， } ]//包含项目 });

问题 这是一个现场演示
1） 如何将登录按钮居中对齐？
2） 图像和所有文本框对齐窗口框的中心和中间。

尝试以下操作：

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    
         });

var loginForm=new Ext.form.FormPanel({
框架：对，
边界：是的，
布局：{
类型：“hbox”，
对齐：“拉伸”
},
项目：[{
xtype:'图像'，
src:'images/system users.png'，
宽度：100，
}, {
xtype:'容器'，
默认值：{
标签宽度：80，
},
布局：{
键入：“vbox”，
对齐：“拉伸”，
填充：“0 20 0”
},
弹性：1，
项目：[{
xtype:'textfield'，
id:'用户名'，
字段标签：“用户名”
}, {
xtype:'textfield'，
id:'密码'，
fieldLabel:“密码”，
输入类型：“密码”，
次值：false
}, {
xtype:'隐藏'，
id:“挑战”，
值：“”，
次值：false
}, {
xtype:'容器'，
布局：{
类型：“hbox”，
包装：'结束'
},
项目：[btnLogin]
}],
}]//包含项目
});

---

在hbox布局中，您可以将

align:'stretch'

选项和

flex:1

选项添加到项目中以拉伸它们。我还将按钮放在另一个容器中，将其粘贴到右侧。

拉伸

不是一个好主意，所有myimage和textfield的大小都不是我想要的大小。您可以找到对齐示例。找一个适合你需要的。

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    
 });