Adding a combobox to a toolbar to filter a grid

3. Next we create an Ext.form.field.ComboBox bound to our new store, with its
displayField and valueField properties set to our store's only field:

var filterCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Status Filter',
labelWidth: 70,
queryMode: 'local',
displayField: 'Status',
valueField: 'Status',
store: statusStore
});

var invoicesGrid = Ext.create('Ext.grid.Panel', {
title: 'Chapter 9',
height: 300,
width: 600,
store: invoiceStore,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [filterCombo]
}],
columns: [{
header: 'Client',
dataIndex: 'Client'
}, {
header: 'Date',
dataIndex: 'Date'
}, {
header: 'Amount',
dataIndex: 'Amount'
}, {
header: 'Status',
dataIndex: 'Status'
}],
renderTo: Ext.getBody()
});

filterCombo.on('select', function(combo, records, opts) {
invoicesGrid.getStore().clearFilter();
// if there are selected records and the first isn't
// 'All' then apply the filter
if(records.length > 0 && records[0].get('Status') !== 'All') {
var filterStatus = records[0].get('Status');
invoicesGrid.getStore().filter('Status', filterStatus);
}
});