I have a store that loads a grid that displays state name, capital, and Cold Weather.
I also have a checkbox that filters the store depending on the Yes value of 'Cold Weather' column.
When I click the checkbox, the grid filters and shows the states that have 'yes', but when I uncheck the checkbox, it does nothing.
How can I revert back the store to display previous store? Below is my checkboxfield. Please help.
items: [
{
xtype: 'checkboxfield',
boxLabel: 'Show only Cold State',
scope: this,
handler: function (field, value) {
scope: this,
this.checkValue = field.getValue();
console.log(this.checkValue);
if (this.checkValue == true) {
this.store.filter('Cold', 'Yes');
}
else if (this.checkValue == false) {
}
},
UPDATED CODE - when I do this, I get this error
TypeError: tempstore1 is undefined
items: [
{
xtype: 'checkboxfield',
boxLabel: 'Show only Cold State',
scope: this,
handler: function (field, value) {
scope: this,
this.checkValue = field.getValue();
console.log(this.checkValue);
if (this.checkValue == true) {
var tempstore1 = Ext.StoreMgr.lookup('store');
tempstore1.filters.add('CheckBoxFilter', new Ext.util.Filter({
property: 'Cold',
value: 'Yes',
root: 'myTable'
}));
console.log('here');
tempstore1.load();
}
else if (this.checkValue == false) {
this.store.filters.removeAtKey('CheckBoxFilter');
}
},
2nd UPDATE - now I get this error
TypeError: a.getRoot.call(a, d) is undefined
instead of
var tempstore1 = Ext.StoreMgr.lookup('store');
I am using
var tempstore1 = Ext.getCmp('GridArea1').store;
GridArea1
is the id of my gridpanel.
3rd UPDATE - Now I get this error with
var tempstore1 = Ext.getCmp('GridArea1').getStore();
error from chrome debugger... "true" and "here" are my console.log and so is the "h" part... that is what the tempstore1 has instead of my data..
true
h {hasListeners: e, scope: h, loading: false, events: Object, eventsSuspended: false…}
here
Uncaught TypeError: Cannot read property 'Cold' of undefined
You need to use clearFilter()
xtype: 'checkboxfield',
boxLabel: 'Show only Cold State',
scope: this,
handler: function (field, value) {
this.checkValue = field.getValue();
console.log(this.checkValue);
if (this.checkValue == true) {
this.store.filter('Cold', 'Yes');
}
else if (this.checkValue == false) {
this.store.clearFilter();
}
}
It is possible to remove a specific filter (clearFilter()
removes them all). Instead of using the store.filter('property_to_filter','value')
method, use:
store.filters.add('Coldfilter', new Ext.util.Filter({
property: 'Cold',
value: 'Yes',
root: 'data'
}));
store.load();
To remove the filter, use:
store.filters.removeAtKey('Coldfilter');
There was nothing in the docs about root: 'data'
to be added in the filter, now it works: http://jsfiddle.net/vrVRP/2/