Javascript 左对齐一个子项，右对齐第二个子项

我有hbox和2个工具栏在里面。。。我需要先从左对齐，再从右对齐，即使第一个是隐藏的

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

---

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

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

---

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

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

---

试试这个……据我了解，这基本上符合你的要求

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

---

试试这个……据我了解，这基本上符合你的要求

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

---

如果您提供CSS来完成这一点，这将是一个更好的答案。如果您提供CSS来完成这一点，这将是一个更好的答案。