使用ExtJS 4对齐容器中间的按钮

Question

问题很简单.我有一个主屏幕,北区必须显示两个文本字段和一个按钮,以便用户连接.

我有这个代码.

Ext.create('Ext.container.Viewport', {
    layout: 'anchor',
    id: 'homescreen', 
    items: [
        {    
            layout: 'border',
            border: false,
            height: 160,
            anchor: '100%',
            items: [
                {
                region: 'west',
                // some codes here
                },
                {
                xtype: 'container',
                width: '70%',
                region: 'east',
                layout: 
                    {
                    type: 'table',

                    columns: 1,
                    tdAttrs: 
                        { 
                        style: 'padding: 5px 15px 5px 15px;',
                        align: 'middle',
                        },
                    defaults: 
                        {
                        width: 150,
                        textAlign: 'right'
                        },
                    },
                    items: [
                        {
                        xtype: 'textfield',
                        //fieldLabel: 'login',
                        labelWidth:50,
                        emptyText: 'Utilisateur',
                        margin: '18 0 0 0',

                        },
                        {
                        xtype: 'textfield',
                        //fieldLabel: 'mot de passe',
                        labelWidth:100,
                        emptyText: 'Mot de passe',

                        },
                        {
                        xtype: 'button',
                        html: 'Connexion',
                        scale: 'large',
                        },
                    ]
            }]

        }, 

如您所见,所有文本字段和按钮在一列上垂直对齐.但问题是它们显示在容器的左侧.如何在右侧显示它们(不使用css)？=
水平对齐它们.

Answer 1

VBox布局可能更适合您的用例.它垂直堆叠组件,并允许您控制生成的块的水平和垂直对齐.

尝试以下布局,例如:

layout: {
    type: 'vbox'
    ,align: 'center' // or 'right'
    ,pack: 'center' // controls vertical align
    ,defaultMargins: 5
}