Sencha Touch的佈局

下面是我們項目中的視圖代碼。我想在vbox佈局中使用一個formpanel和一個按鈕。我想要水平居中按鈕。Sencha Touch的佈局

Ext.define('Coder.view.membership.Login', { 
    extend: 'Ext.Container', 
    xtype: 'membershiploginview', 

    requires: ['Ext.field.Password'], 

    config: { 
     title: 'Membership', 
     layout: { 
      type: 'vbox', 
      align: 'center', 
      pack: 'center' 
     }, 
     items: [ 
      { 
       xtype: 'formpanel', 
       items: [ 
        { xtype: 'textfield', name: 'userName', label: 'User ID' }, 
        { xtype: 'passwordfield', name: 'password', label: 'Password' } 
       ], 
       height: 300, 
       flex: 1 
      }, 
      { xtype: 'button', text: 'Login' } 
     ] 
    } 
})

使用此配置，表單面板將垂直取所有可用空間，但其中的所有控件都不可見。我可以看到水平居中的窗體在窗體結束的位置。爲什麼我無法看到窗體中的控件？

來源

2013-02-27 Élodie Petit

儘量居中：真 – 1Mayur 2013-02-28 05:46:45

在vbox佈局：

pack: center將物品放置在中間垂直。
align: center將放置物品在水平中間。

您的表單面板沒有顯示出來，因爲你不指定任何寬度爲表單讓你的形式顯然會採取width: 100%作爲默認值，因此你的配置align: center得到衝突。

要使其有效，您應該刪除該配置或爲表單面板指定寬度。

來源

2013-02-27 17:59:33 Eli

代替這段代碼，

{ 
    xtype: 'button', 
    text: 'Login' 
}

使用方法如下：

title : 'Membership',    
items : [ 
    { 
     xtype : 'formpanel', 
     items: [ 
      { xtype: 'textfield', name: 'userName', label: 'User ID' }, 
      { xtype: 'passwordfield', name: 'password', label: 'Password' } 
     ], 
     height : 300 
    },{ 
     layout : { 
      type : 'vbox', 
      align : 'center' 
     }, 
     items : [{ 
      xtype: 'button', 
      text: 'Login', 
      width : 100 
     }] 
    } 
]

它在默認情況下需要layout:'auto'並把按鈕在中央。

來源

2013-02-28 08:32:21 Swar

你給登錄按鈕樣式像利潤率左和右緣

   { 
           xtype:'button', 
           ui:'decline', 
           style: 'font-size: .8em; border:#A4A4A4 solid 1px;border-radius: 6px; -moz-border-radius:6px ;-webkit-border-radius:6px ; margin-left: 20px; margin-right: 20px; height:40px', 
           html:'<font color="white">Sign In</font>', 
           action:'signIn' 
           },

來源

2013-04-03 11:53:25

Sencha Touch的佈局

回答

相關問題