I have an ExtJS 6.2 grid using the 'classic' API. I don't do a super-ton of Ext, so please bear with me. But we have a grid we largely re-use over and over in various apps with slight customizations. In one, we have a text field for a filter. But that filter triggers a reload REALLY fast as default behavior. Too fast for someone to type in anything meaningful. I'd like to slow that puppy down. Ideally, I'd like the reload to only happen when the menu is CLOSED, but if I can at least increase the time from someone to type and a reload, I can at least make it reasonable.
Problem is that I've no idea how to do that, and a brief perusal of the helps docs doesn't seem to show me any setting (maybe I'm looking in the wrong place). Any ideas?
The filter is defined as:
{ type: 'string', dataIndex: 'assetId', value: '', active: false }
You need to add a buffer to the change event. That way as long as someone types no event will be handled. Once no one changes the textfield value for 500ms the event will be handled.
controller: 'main',
items: [{
xtype: 'textfield',
fieldLabel: 'Filter By Name',
listeners: {
change: 'onFilterfieldChange',
buffer: 500
}
}]
Controller
Ext.define('MyApp.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onFilterfieldChange: function(textfield, newValue) {
let store = this.getViewModel().getStore('gridStore');
store.clearFilter(true);
store.setFilter([
{ property: 'firstName', value: newValue}
]);
store.load();
}
});