View Full Version : When Combobox and DataGrid are tied to the same store, store filtering affects both?

11 Jul 2014, 10:18 PM
Please verify this scenario:

1. There is a customerStore
2. There is a ComboBox with store = customerStore
3. There is a Grid Panel with store = customerStore

I expect to accomplish the following:
1. User search a Customer via ComboBox
2. The selected Customer in the ComboBox triggers a function to highlight the corresponding Customer in the Grid Panel
3. Grid Panel must show the complete Customer List all the time.

I'm stuck in:
1. When keying-in a customer name in the ComboBox, the Grid Panel data is filtered the same way as what's happening in the ComboBox (since both are using the same store).

My question:
1. Is there a Combobox parameter to prevent it from 'filtering' the customerStore so that other components using it will not be affected during it's onChange (keying-in) event?
2. How can I achieve this if item 1 is not available?

11 Jul 2014, 11:44 PM
I tried the ComboBox's disableKeyFilter (enable/disabled) and it seems it is not working (extjs 4.2.x).
Not working in the sense that combobox is still filtering the store as I key-in.

xtype: 'container',
height: 30,
maxHeight: 30,
minHeight: 30,
style: 'margin-buttom: 10px;',
layout: {
type: 'hbox',
align: 'stretch'
items: [
xtype: 'combobox',
height: 22,
itemId: 'customerNameDD',
maxHeight: 22,
minHeight: 22,
minWidth: 303,
width: 303,
fieldLabel: 'Customer:',
hideLabel: true,
labelStyle: '',
labelWidth: 70,
fieldStyle: '',
anyMatch: true,
displayField: 'companyName',
queryMode: 'local',
store: 'companyListStore',
typeAhead: true,
valueField: 'companyID'
xtype: 'tbspacer',
flex: 1,
maxWidth: 3,
minWidth: 3,
width: 3
xtype: 'button',
disabled: true,
height: 22,
maxHeight: 22,
minHeight: 22,
text: '+',
tooltip: 'Add this company to the list.',
tooltipType: 'title'
xtype: 'gridpanel',
height: 500,
itemId: 'CompanyListGrid',
maxHeight: 500,
minHeight: 500,
autoScroll: true,
header: false,
title: 'My Grid Panel',
titleAlign: 'center',
syncRowHeight: false,
enableColumnHide: false,
enableColumnMove: false,
enableColumnResize: false,
store: 'companyListStore',
columns: [
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
if (record.get('updatedDate') === null) {
return '<span style="color: #ff3300;">' + value + '</span>';
} if (record.get('updatedDate') !== null) {
return '<span style="color: #339933;">' + value + '</span>';
return value;
defaultWidth: 75,
dataIndex: 'companyName',
text: 'Company',
flex: 3
xtype: 'gridcolumn',
maxWidth: 60,
minWidth: 60,
width: 60,
defaultWidth: 60,
dataIndex: 'updatedDate',
text: 'Updated',
flex: 3

12 Jul 2014, 11:52 AM
disableKeyFilter is an option inherited from TextField for controlling the filtering of keystrokes, it has nothing to do with filtering a store.

Store filtering is fundamental to how a combobox shows an appropriate list. You could set editable: false so that the combobox never attempts any filtering. If you want to retain the option of typing in a value then you could do something like this:


However, notice that the drop-down list won't be filtered as the user types.

12 Jul 2014, 10:05 PM
Thanks for the insight Skirtle.

I'll consider your alternative solutions in other projects.

For now, I really need to have the combobox still filter the store while the grid panel retain everything all the time. (I'll just create a store replica for the grid panel.)

This reminds me of store.removeAll(silent) in 4.2.x... which provides a mechanism to block the deletion of store in the database thru the silent parameter...
I'm hoping to find a solution close to this mechanism wherein filtering of combobox is "silent" and will not affect the store.