Question

以下是我们项目中的视图代码。我想在vbox布局中使用formpanel和按钮。我想水平居中按钮。

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

使用此配置，formpanel将垂直占用所有可用空间，但其中没有任何控件可见。我可以看到按钮水平居中，formpanel结束。为什么我看不到formpanel中的控件？

Answer 1

在vbox布局中：

pack: center会将项目垂直放置在中间。
align: center会将项目水平放置在中间。

您的表单面板没有显示，因为您没有为表单指定任何宽度，因此您的表单显然会默认为width: 100%，因此您的配置align: center会发生冲突。

要使其正常工作，您应该删除该配置或指定表单面板的宽度。

Answer 2

而不是这段代码，

{ 
  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'并将按钮置于中心位置。

Answer 3

您提供登录按钮样式，如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'
                              },

使用Sencha Touch进行布局

3 个答案: