Want to Pass Variable Into a Store From a Panel

[markwyner]

I have a panel which is pulling a list of items that are bound to a specific category and then displaying them in a list. I need to pass a variable into the store so it knows which category is in view, consequently enabling it to pull only the records within that category using filters.

Everything is currently working if I hard code a category name into the store. So all I need to be able to do is push a variable into the store where I've hard coded in the test category.

Here is the relevant code which is currently working with the hard-coded category name…

THE MODEL/STORE:

Ext.regModel('Items', {
	fields: ['id', 'itemName', 'itemCat', 'itemImg'],
	proxy: {
		type: 'localstorage',
		id: 'item_list'
	}
});
var StoreItemsByCat = new Ext.data.Store({
	model: 'Items',
	autoLoad: true,
	autoSave: true,
	filters: [{
		property: 'itemCat',
		value: 'sports'
	}]
});

THE PANEL:

items: [{
		xtype: 'list',
		store: StoreItemsByCat,
		itemTpl: '{itemName}'
	}]

[markwyner]

Anyone have any ideas about this one? There must be a way to accomplish this. Thanks in advance to anyone who can offer some help.

[jmclem]

Hi,

maybe Ext.data.Store.filter() and Ext.data.Store.clearFilter()? Have a look at the API doc for further information.

Jean-Marie.

[markwyner]

Thanks, jmclem. The filter method is exactly what I was searching for. However, it doesn't seem to stick when I activate a new panel on tap. Example…

I apply the following listener to list categories:

listeners: {
	itemtap: function(list, index) {
		CategoriesWrapper.setActiveItem('categories_details', {type:'slide', direction:'left'});
		var curCat = name.data.catName;
		StoreItems.filter('itemCat',curCat);
	}
}

In the categories_details panel I want to list all items which have a "catName" which matches the category name which was tapped. So in the listener above you can see I'm getting the value for catName and passing it into the filter.

The categories_details panel items look like this:

items: [{
	xtype: 'list',
	store: StoreItems,
	itemTpl: '{itemName}'
}]

The very first time I tap a category all of the items with a matching catName correctly display in the list. It works! But then if I tap back into the category list and tap another, nothing appears in the categories_details panel. Even if I tap the category name I first tapped. Nothing appears in that panel from that point on.

Do you know of a way to make that filter refresh with each tap? It seems like the listener should respect each tap and begin anew.

Thanks in advance.

[markwyner]

Solved! Once I apply clearFilter() before every call for the filter everything works fine. I didn't realize I'd have to clear that every time, but I guess so.

So the end result looks like this:

listeners: {
	itemtap: function(list, index) {
		CategoriesWrapper.setActiveItem('categories_details', {type:'slide', direction:'left'});
		var curCat = name.data.catName;
		StoreItems.clearFilter();
		StoreItems.filter('itemCat',curCat);
	}
}