I have hbox and 2 toolbars inside... I need align first to left and second to right even if first is hidden

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

I have hbox and 2 toolbars inside... I need align first to left and second to right even if first is hidden

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

• javascript
• extjs
• ext4

2 Answers 2

Try this..this is pretty much as per your requirement according to my understanding.

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

Is there any restrictions that prevents you from using CSS? If not can you not add itemCls to the config with one class for floating left and one for right?

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