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可能会更适合您的用例。它垂直堆叠组件，并允许您控制结果块的水平和垂直对齐。

尝试以下布局，例如：

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

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

1 个答案: