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オプションを項目に追加して、それらを伸ばすことができます。また、ボタンを別の容器に入れて、右にくっつけます。