PDA

View Full Version : Extjs 4.1 how to get selected value on combobox for filter



eaglefox12
14 Nov 2012, 6:28 AM
Hi all... I am trying to get this filter for grid working. basially when a user selects a value from combobox, the combobox fires a filter... according to that filter, the grid displays more data.

xtype: 'combo',
id: 'iccombo',
scope: this,
store: this.Combostore,
fieldLabel: 'Short State',
displayField: 'State',
valueField: 'State',
typeAhead: true,
triggerAction: 'all',
queryMode: 'remote',
name: 'State',
labelWidth: 125,
anchor: '95%',
listeners: {
scope: this,
select: this.fireFilter
}

and this is my fireFilter function


fireFilter: function (value) {

// Get passed value
this.selectedC = value.getValue();
console.log('selectedValue: ' + this.selectedC);

// Clear existing filters
this.store.clearFilter(false);

// Build filter

var myfilter = Ext.create('Ext.util.Filter', {
scope: this,
filterFn: function (item) {
var fieldNames = item.fields.keys;

for (var j = 0; j < fieldNames.length; j++) {
var fieldName = fieldNames[j];
if (item.data[fieldName] != null) {
var stringVal = item.data[fieldName].toString();
if (stringVal != null && stringVal.toLowerCase().indexOf(value.toLowerCase()) != -1) {
return true;
}
}
}
return false;
}

});
// Apply filter to store
this.store.filter(myfilter);
}
when I run the code, it display all data in the grid, and on selection of combobox, it still shows the same data..

this is what I got in firebug's response



_dc
1352902173425


filter
[{"property":null,"value":null}]


limit
20


page
1


start
0






as you can clearly see, the selected 'value' is null, but my 'console.log' prints the value selected... I think the way I am getting the passed value and applying the filter is incorrect... can someone please take a look... thanks

vietits
14 Nov 2012, 6:22 PM
It seems that you use remote filtering? and do the filtering on all fields? If so, you don't need to create a filter by using filterBy. Try to fix your code as below and transfer the task of filtering to server script:


fireFilter: function (value) {


// Get passed value
this.selectedC = value.getValue() || '';
console.log('selectedValue: ' + this.selectedC);


// Clear existing filters
this.store.clearFilter(false);


// Build filter


// var myfilter = Ext.create('Ext.util.Filter', {
// scope: this,
// filterFn: function (item) {
// var fieldNames = item.fields.keys;
//
// for (var j = 0; j < fieldNames.length; j++) {
// var fieldName = fieldNames[j];
// if (item.data[fieldName] != null) {
// var stringVal = item.data[fieldName].toString();
// if (stringVal != null && stringVal.toLowerCase().indexOf(value.toLowerCase()) != -1) {
// return true;
// }
// }
// }
// return false;
// }
//
// });
// Apply filter to store
// this.store.filter(myfilter);
this.store.filter('filter', this.selectedC.toLowerCase());
}

eaglefox12
16 Nov 2012, 5:57 AM
Thanks again Veitits... much appreciated :)