View Full Version : [FIXED] [4.1b2] Problem setting grid column filters programmatically

17 Feb 2012, 7:22 AM
Ext version tested:
Ext 4.1b2

Browser versions tested against:
FF10 (firebug 1.9.1) IE8 Chrome 16

When attempting to set a numeric filter for Ext.ux.grid.FiltersFeature, the filter is not correctly applied when changing from an "equals" filter to a "less than" filter.

Steps to reproduce the problem:
Set up a grid with a numeric column filter Apply an "equals" filter for some value Programmatically, set the filter value to be a "less than" filter

The result that was expected:
The grid should be filtered, showing all records less than the specified value

The result that occurs instead:
The filter value is empty, and the grid shows all records

Test Case:
The grid in this example has three toolbar buttons - one to apply a filter for all ages equal to 42, one to apply a filter for all ages less than 25, and the last to clear the age filter. Note that if you apply the "Age == 25" and then switch directly to "Age < 25", all records are shown in the grid, even those with ages of 25 or greater. However, applying the filters in any other order works fine.

enabled: true
Ext.Loader.setPath('Ext.ux', home + '/examples/ux');

Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone', 'age'],
{ name: 'Lisa', email: "[email protected]", phone: "555-111-1224", age: 14 },
{ name: 'Bart', email: "[email protected]", phone: "555-222-1234", age: 16 },
{ name: 'Homer', email: "[email protected]", phone: "555-222-1244", age: 42 },
{ name: 'Marge', email: "[email protected]", phone: "555-222-1254", age: 38 }
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'

var filters = Ext.create('Ext.ux.grid.FiltersFeature', {
local: true,
filters: [{
type: 'numeric',
dataIndex: 'age'

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
tbar: [{
text: 'Age == 42',
handler: function() {
eq: 42
}, {
text: 'Age < 25',
handler: function() {
lt: 25
}, {
text: 'Clear',
handler: function() {
features: filters,
store: store,
columns: [
{ header: 'Name', dataIndex: 'name', flex: 1 },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone', flex: 1 },
{ header: 'Age', dataIndex: 'age', flex: 1 }
height: 200,
width: 500,
renderTo: Ext.getBody(),
listeners: {
afterrender: function() {
// Don't wait for the menu to be shown to create the filters.


Debugging already done:
The problem exists in the setValue and onInputChange method of Ext.ux.grid.menu.RangeMenu. When setValue is called, it sets the value of each filter field iteratively, meaning that onInputChange is called multiple times, as each of the "less than", "greater than", and "equals" values are set. However, the onInputChange method will automatically set the "less than" and "greater than" values to null if a value already exists for the "equals" filter. Thus, if the "less than" value is set first, but there is a pre-existing value in the "equals" filter, the new "less than" value will simply be erased.

Possible fix:
Here is the workaround override I'm currently using. It simply disables the "onInputChange" functionality while the setValue method is still in the process of executing.

Ext.define('ExtRM.overrides.RangeMenu', {
override: 'Ext.ux.grid.menu.RangeMenu',

setValue: function() {
this.preventChange = true;
this.preventChange = false;

onInputChange: function() {
if (this.preventChange) {
else {

Additional CSS used:
only default ext-all.css

Operating System:

17 Feb 2012, 8:09 AM
Thank you for the report.