0

以下は、私たちのプロジェクトのビューのコードです。vbox レイアウトにフォームパネルとボタンが必要です。ボタンを水平方向に中央揃えにしたい。

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' }
        ]
    }
})

この構成では、フォームパネルは使用可能なすべてのスペースを垂直に使用しますが、フォームパネル内のコントロールは表示されません。フォームパネルが終了する位置で水平方向にボタンが中央に配置されているのがわかります。フォームパネルにコントロールが表示されないのはなぜですか?

4

3 に答える 3

1

レイアウトvbox:

  1. pack: centerアイテムを垂直に中央に配置します。

  2. align: centerアイテムを中央に水平に配置します。

フォームの幅を指定していないため、フォームパネルが表示されなかったため、フォームが明らかにwidth: 100%デフォルトとして使用されるため、構成がalign: center競合します。

機能させるには、その構成を削除するか、フォーム パネルの幅を指定する必要があります。

于 2013-02-27T17:59:33.143 に答える
0

ログインボタンにmargin-leftやmargin rightのようなスタイルを与える

                {
                                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-03T11:53:25.700 に答える