aligning buttons right using tbfil

[Anthony.Hall]

I have the following. I would like the first item 'create' to be aligned to the right.

I've read about using 'tbfill' to align. But i'm unsure how to use this with my implementation.


dockedItems:[ {
xtype:'toolbar',
flex:1,
dock:'top',
items:[
{


xtype:'button',
id: 'ContactCreate',
name: 'ContactCreate',
text:'Create',
action:'create',
align: 'right',
style: 'float:right',
width:'100',
iconCls:'icon-add'


},
{
xtype:'button',
id: 'ContactSave',
name: 'ContactSave',
text:'Save',
action:'save',
width:'100',
iconCls:'icon-save'
},


{
xtype:'button',
id: 'ContactDelete',
name: 'ContactDelete',
text:'Delete',
action:'delete',
width:'100',
iconCls:'icon-delete'
}


]
}
],

[sword-it]

Hi

you can see this link :- http://docs.sencha.com/ext-js/4-1/#!/api/Ext.toolbar.Fill
(http://docs.sencha.com/ext-js/4-1/#!/api/Ext.toolbar.Fill) for how to use tbfill

[Anthony.Hall]

I was thinking that you add the tbfill to an actual item. Here is a working example.


dockedItems:[



{
xtype:'toolbar',
flex:1,
dock:'top',
items:[
{
xtype:'button',
id: 'ContactSave',
name: 'ContactSave',
text:'Save',
action:'save',
width:'100',
iconCls:'icon-save'
},
{
xtype:'button',
id: 'ContactDelete',
name: 'ContactDelete',
text:'Delete',
action:'delete',
width:'100',
iconCls:'icon-delete'
},
{ xtype: 'tbfill' },
{


xtype:'button',
id: 'ContactCreate',
name: 'ContactCreate',
text:'Create',
action:'create',
width:'100',
iconCls:'icon-add'


}




]
}

],