將一個孩子與extjs對齊，向左對齊

Question

我里面有hbox和2個工具欄...即使第一個隱藏，我也需要從左到右對齊

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

Answer 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');   

Answer 2

是否有任何限制使您無法使用CSS？ 如果不能，您是否不能將itemCls添加到配置中，其中一類用於向左浮動，一類用於向右浮動？

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