stretching a searchfield to fit? any ideas?

[ampersand]

Hi There,
I have a toolbar created like so:



var maptoolbar = new Ext.Toolbar({
dock : 'top',
xtype : 'toolbar',
defaults : {
iconMask : true
},
layout : {
pack : 'justify',
align : 'center'
},
items : [{
iconCls : 'locate',
handler : function() {
//insert actions here


}
}, {
xtype : "searchfield",
placeHolder : "Area Search...",
name : "searchmap",
centered : true,
layout : {
type : 'fit',
pack : 'justify'
}
}, {
xtype : 'spacer'
}, {
iconCls : 'search',
xtype : 'button',
align : 'right',
handler : function() {
//insert actions here


}
}]
});


and I want it to stretch to fit between the 2 buttons whether on a small screen or a larger one, Ive played around with the layout options but I can't see to manage it, also css percentages have irregular outcomes because they seem to either oversize or undersize (i.e. they are a percentage of the whole screen)

Can someone throw me a bone here?

see the images for examples

2778127782

[arthurakay]

Have you tried the "hbox" layout, assigning a "flex" config to your search field?

[ampersand]

you're amazing... thanks.
sorry i'm new to sencha but rapidly getting there :-)

thanks very much!!