View Full Version : Applying filter to dtore from view

14 Aug 2012, 1:07 PM

I have a store(linkstore) data with different categories.
I have a view with the following data

xtype: 'dataview',
tpl: '<tpl for="."><a href="{linkurl}" target="_blank">{linkname}</a></tpl>',
store: linkStore,
stripeRows: true

I want to add a filter condition in my view to show data belonging to particular category(say "help"). I cannot add the filter in store because there is another place where I will be filtering the same data for "faq". Please let me know how to add filter.

14 Aug 2012, 3:47 PM
You can use <tpl if="">...</tpl> to filter out what you need. Example:

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="category == \'help\'">',
'<a href="{linkurl}" target="_blank">{linkname}</a>',

10 Mar 2013, 6:57 PM
I am using this and it is filtering as expected (well, at least partially).

I have the following store:

Ext.define("Produce.store.List", {
extend: 'Ext.data.Store',
alias: 'store.List',
config: {
model: 'Produce.model.Food',
sorters: 'category',
grouper: function(record) {
return record.get('category')[0];
data: [
{ category: 'fruit', str: 'tomato'},
{ category: 'fruit', str: 'green bean'},
{ category: 'vegetable', str: 'celery'},
{ category: 'vegetable', str: 'sprouts'},
{ category: 'fruit', str: 'squash'},
{ category: 'fruit', str: 'snap peas'},
{ category: 'vegetable', str: 'rhubarb'},
{ category: 'vegetable', str: 'cabbage'}


And the following view/panel:

Ext.define('Produce.view.Vegetable', {
extend: 'Ext.tab.Panel',
requires: ['Produce.model.Food'],
config: {
tabBar: {
docked: 'top',
ui: 'neutral',
layout: {
pack: 'center'
items: [{
title: 'Produce',
layout: Ext.os.deviceType == 'Phone' ? 'fit' : {
type: 'vbox',
align: 'center',
pack: 'center'
cls: 'demo-list',
items: [{
width: Ext.os.deviceType == 'Phone' ? null : 300,
height: Ext.os.deviceType == 'Phone' ? null : 500,
xtype: 'list',
store: 'List',
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="category === \'vegetable\'">',
'<a href="" target="">{str}</a>',
variableHeights: false

When I run this only the vegetables in the store are displayed - which is great - but blank rows are also displayed where the fruit items were filtered out in the list rendered in the panel - which is not great. (Similarly, in my "fruit" view, fruit are displayed as desired, but where there were vegetables, blanks rows show up).

How can I get rid of these blank rows (this is an issue, since the fruits and vegetables in my list are just to get the app working, and are a fill-in to represent a much larger number of records that will be categorized for my actual app). I tried using Ext.IsEmpty and filtering by null, but neither of these did the trick.

Thanks in advance!