100% width for a field in a toolbar

Question

I am putting a search field in a gridpanel toolbar like this:

var searchGrid = Ext.create('Ext.grid.Panel', {
    store: searchStore,
    columns: [searchColumns],
    hideHeaders: true,
    tbar: [{
        xtype: 'searchfield',
        store: searchStore
    }],
    listeners: {
        itemclick: function(v,record) {
            // do stuff
        }
    }
});

I would like my search field to extend the full width of the grid. I know that I can add a listener to the grid that will resize the search field whenever the grid size changes, but does anyone know of a config or something cleaner that I missed?

Answer 1

Specify flex: 1 on the field, since the toolbar uses a HBox layout.