将一个孩子向左对齐，第二个向右对齐答案

【问题标题】：Align one child to left and second to right extjs将一个孩子向左对齐，第二个向右对齐
【发布时间】：2014-09-11 09:48:30
【问题描述】：

我有 hbox 和 2 个工具栏...即使第一个是隐藏的，我也需要先左对齐，再右对齐

{
                    layout: 'hbox',
                    items: [
                        {
                            xtype : 'toolbar',
                            itemId: 'searchToolbar',
                            items : [
                                ...
                            ]
                        },
                        {
                            xtype: 'toolbar',
                            items: [
                                ...
                            ]
                        }
                    ]
                },

【问题讨论】：

标签： javascript extjs ext4

【解决方案1】：

试试这个..根据我的理解，这几乎符合您的要求。

Ext.define('My.test.Viewport', {
extend: 'Ext.container.Viewport',

requires: [
    'Ext.layout.container.Border',
    'Ext.layout.container.HBox',
    'Ext.toolbar.Toolbar',
    'Ext.toolbar.TextItem',
    'Ext.toolbar.Fill'
 ],
 autoScroll: true,
 items:[
        {
                layout: 'hbox',
                items: [
                    {
                        xtype : 'toolbar',
                        itemId: 'searchToolbar',
                        items : [
                                {
                                    xtype: 'tbtext',
                                    text: 'Item1'
                                }
                        ]
                    },
                    {
                    xtype: 'tbfill'
                    }
                    ,{
                        xtype: 'toolbar',
                        items: [
                             {
                                       xtype: 'tbtext',
                                       text: 'Item2'
                              }

                        ]
                    }
                ]
            }

]

});

Ext.create('My.test.Viewport');

【讨论】：

【解决方案2】：

是否有任何限制阻止您使用 CSS？如果不是，您可以不将 itemCls 添加到配置中，其中一个类用于左浮动，一个类用于右浮动？

items: [{
    xtype: 'toolbar',
    itemCls: 'toolbar-dock-left',
    ...
}, {
    xtype: 'toolbar',
    itemCls: 'toolbar-dock-right',
    ...
}

【讨论】：

如果您提供 CSS 来完成此操作会是一个更好的答案。