Positioning individual items in hbox layout extjs - extjs

Question

Is it possible to position some of my items in my panel to the left, and the last items all the way to the right? So that there is an empty space in the middle. Right now I am using hbox layout, and put an empty container in the middle and flex it like this:
items: [{
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'label',
text: 'Filter on vehicle'
},{
xtype:'textfield'
},{
xtype: 'button',
text: '...'
},{
xtype: 'container',
flex:1
},{
xtype: 'button',
text: 'New'
},{
xtype:'button',
text: 'Edit'
},{
xtype: 'button',
text: 'Delete'
}]
}]
Any better way to do this?

Answer 1

Don't know if it is a better solution or not.But DOM wise it will be lighter.
We can use tbfill xtype instead of inserting a container.
{
xtype: 'container',
layout: 'border',
items: [{
xtype: 'label',
text: 'Filter on vehicle',
},{
xtype:'textfield',
},{
xtype: 'button',
text: '...',
},
{
xtype:'tbfill'
},{
xtype: 'button',
text: 'New',
},{
xtype:'button',
text: 'Edit',
},{
xtype: 'button',
text: 'Delete',
}],
}
Working Example

Answer 2

If you want to use elements like button, textfield, label, combobox... You can use Ext.toolbar.Toolbar xtype: toolbar. So if you need to put items to the right you can easy do this with '->', also you can use '|' to put vertical separator to the tollbar.
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [
{
xtype: 'toolbar',
layout: 'hbox',
items: [
{
xtype: 'label',
text: 'Filter on vehicle'
},
{
xtype: 'textfield'
},
{
xtype: 'button',
text: '...'
},
{
xtype: 'button',
text: 'New'
},
'->',
{
xtype: 'button',
text: 'Edit'
},
{
xtype: 'button',
text: 'Delete'
}
]
}
]
});

Answer 3

What you're doing is fine, and arguably the best solution with 1 minor suggestion. Use 'component' instead of 'container' as that will be slightly lighter.
The previous answers of 'tbfill' and '->' are actually the same thing as what you're doing. '->' is a shorthand for 'tbfill' and 'tbfill' is literally a flex:1 component.
All 3 solutions should work fine but I like using a flex:1 component because using tbfill depends on knowing an implementation detail of toolbar, namely that is uses hbox. Sencha is free to change how toolbar and tfill work in a future release, at which point your code (if it uses tbfill) is broken.