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

而不是这段代码，

{ 
  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-28T08:32:21.543 回答
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 回答