PDA

View Full Version : How to add filters to a store?



blessan
23 Sep 2010, 1:36 AM
I have a problem with a select box. I have attached it to a stored. Which I initially filter using
sell_ProdListStore.filter({property: 'groupid', value: filterKey});

But my filterkey changes. When apply another filter to the store, the store gets empty. tried clearFilter and all but they didnt work. How are multiple filters added to store? I want to filter my select box store based on the value selected in another select box.

aconran
23 Sep 2010, 2:51 PM
What type of behavior are you looking for? Do you want to apply multiple filters or are you looking to clear the filter and then apply by a different filter (replacement)?

Could you show us some snippets of code you are using?

blessan
23 Sep 2010, 7:52 PM
I am trying to replace the filter.


sell_ProdListStore = new Ext.data.JsonStore({
data : [{ id : 'Hair', name : 'Hair',gid:'001'},
{ id : 'Face', name : 'Face',gid:'002'},
{ id : 'Nails', name : 'Nails',gid:'001'}],
model : 'sell_CategoryModel',
autoLoad:true
});

{
xtype: 'select',
name : 'product',
cls:'formItem formMiddle formGray',
label: 'Product',
valueField : 'id',
displayField : 'name',
store : sell_ProdListStore
}

The above is sample code. I want to replace filter and show data based on the gid.

blessan
24 Sep 2010, 3:10 AM
Has anyone did this before. Im pretty sure everyone replaces filter. Some help would be great.

blessan
24 Sep 2010, 7:51 PM
Does anybody have a link. I just need to know how to replace an existing filter with a new one.

blessan
27 Sep 2010, 7:57 PM
Can someone help me on this. I know we have to make use of the snap shot but im just not sure how. Right now I filter the data myself before loading data to the store.

evant
27 Sep 2010, 11:26 PM
You might want to post something runnable that demonstrates the issue, it's difficult to comment on isolated snippets like that.

blessan
28 Sep 2010, 1:01 AM
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var groupingBase = {
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
grouped: true,
indexBar: true,

disclosure: {
scope: 'test',
handler: function(record, btn, index) {
alert('Disclose more info for ' + record.get('firstName'));
}
},
listeners:{
"itemtap":function(list, index, item, e) {
console.info(list.store.data);
}
},

store: new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

getGroupString : function(record) {
return record.get('firstName')[0];
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
})
};


if (!Ext.is.Phone) {
new Ext.List(Ext.apply(groupingBase, {
floating: true,
id:'lister',
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();
}
else {
new Ext.List(Ext.apply(groupingBase, {
fullscreen: true,
listeners:{
"itemtap":function(list, index, item, e) {
console.info(list, index, item);
}
}
}));
}
}
});



this is the list demo.

Then I type this in the console.
Ext.getCmp('lister').store.filter({property:'firstName',value:'Dave'});

This returns 1 result. After that I cant replace the previous filter with a new one.
When I check the store, there is only 1 item. How can I reload the old data and apply a new filter?

evant
28 Sep 2010, 1:25 AM
Did you miss the clearFilter method?



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var groupingBase = {
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
grouped: true,
indexBar: true,

disclosure: {
scope: 'test',
handler: function(record, btn, index) {
alert('Disclose more info for ' + record.get('firstName'));
}
},
listeners:{
"itemtap":function(list, index, item, e) {
console.info(list.store.data);
}
},

store: new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

getGroupString : function(record) {
return record.get('firstName')[0];
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
})
};


if (!Ext.is.Phone) {
new Ext.List(Ext.apply(groupingBase, {
floating: true,
id:'lister',
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();
}
else {
new Ext.List(Ext.apply(groupingBase, {
fullscreen: true,
listeners:{
"itemtap":function(list, index, item, e) {
console.info(list, index, item);
}
}
}));
}

setTimeout(function(){
Ext.getCmp('lister').store.filter({property:'firstName',value:'Dave'});
}, 2000);

setTimeout(function(){
Ext.getCmp('lister').store.clearFilter();
}, 4000);

setTimeout(function(){
Ext.getCmp('lister').store.filter({property:'firstName',value:'Aaron'});
}, 6000);
}
});

blessan
28 Sep 2010, 1:30 AM
Oh I kinda forgot the clear filter. I always tried to overide the existing filter. Thanks it works now.

blessan
28 Sep 2010, 2:15 AM
If we give data by using the loadData method to the store, clearFilter function is deleting all the records. Is that right. In the above example. I just removed all the data from the store and used loadData and loaded the data from the console. When I used the filter the first time, it worked. After that when i used clearFilter the whole store got empty.
Is this a bug?

evant
28 Sep 2010, 2:33 AM
You haven't provided any code that demonstrates the issue, so I don't know.

blessan
28 Sep 2010, 2:41 AM
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var groupingBase = {
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
grouped: true,
indexBar: true,

disclosure: {
scope: 'test',
handler: function(record, btn, index) {
alert('Disclose more info for ' + record.get('firstName'));
}
},
listeners:{
"itemtap":function(list, index, item, e) {
console.info(list.store.data);
}
},

store: new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

getGroupString : function(record) {
return record.get('firstName')[0];
},

data: []
})
};


if (!Ext.is.Phone) {
new Ext.List(Ext.apply(groupingBase, {
floating: true,
id:'lister',
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();
}
else {
new Ext.List(Ext.apply(groupingBase, {
fullscreen: true,
listeners:{
"itemtap":function(list, index, item, e) {
console.info(list, index, item);
}
}
}));
}
}
});

Then in the console just add
1. Ext.getCmp('lister').store.loadData([{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}]);
this simply add data.
2. Ext.getCmp('lister').store.filter({property:'firstName',value:'Dave'});
The first filter
3. Ext.getCmp('lister').store.clearFilter();
And now all the data is gone.

edspencer
28 Sep 2010, 2:23 PM
This was recently fixed in source control and is verified functioning correctly with your test case. The fix will be part of the next release (which is imminent).

blessan
28 Sep 2010, 7:57 PM
Thanks for the update and fix.

mikeyroy
11 Oct 2010, 12:12 PM
Are you sure this is fixed? I'm still having the same issue in .96.

After the store is initialized and before any filters are applied Ext.store.ExampleStore.snapshot exists but contains 0 items.

After applying filters, using the clearFilter method as appropriate, the list is empty because it keeps reverting to the empty snapshot.

Looking through the code, in Ext.data.Store's filter method instead of this:

this.snapshot = this.snapshot || this.data.clone();

should it be this?

this.snapshot = this.data.clone() || this.snapshot;

If it's like that it behaves as expected, at least for me.

edspencer
11 Oct 2010, 12:19 PM
I'm not sure if it made it into 0.96, but I have the test case sitting in the master branch which passes correctly. When filter is called multiple times, the filters are combined, which is why we use the existing snapshot in favor of a new data clone. We then reset this in clearFilter.

mikeyroy
11 Oct 2010, 12:30 PM
My use case involves applying the filter with each keyup event, so the filter is being cleared every time and a new filter being applied that is either longer or shorter depending on typing or deleting. Since that mod is working for me I'll keep it for now and look forward to whatever comes in the next release.
Thanks.

edspencer
11 Oct 2010, 1:10 PM
Ok - as long as you are always clearing the existing filter first you should be fine. This is a design decision and not a bug...

mikeyroy
11 Oct 2010, 1:23 PM
Yes, I'm clearing the filter first before applying a new one, but IMO what I'm experiencing is a bug since it is populating this.snapshot with an empty dataset every time a filter is applied, it's never populating this.snapshot with any actual data. If I type out BT.store.Friends.snapshot into the Chrome console before and after filters have been applied it always says there are 0 items in that object rather than however many items are showing in the list.

Like I said, I'll wait for the next release and see if it works any differently since this is exactly what was happening with the previous user, what's most important to me is that you guys know about it and I have a temp patch in place while waiting for a fix.

interfasys
16 May 2011, 11:26 AM
I think there is still at least one use case that isn't covered by the current implementation.
When remoteFilter is set to true, the store will be reloaded before new filters can be added, so a new query will have to be made to the server to get the result for all the intended filters.

EDIT: Just did some more testing and I was wrong, 'clearFilter(true)' does work properly and doesn't initiate remote filtering :).