View Full Version : DataView filters

4 May 2010, 5:25 AM
Hi folks,

I try to filter a store/dataview by a tag which each item in the store contains and render this item within a tab which id equals to the item's tag. I think the code should express what I'm looking for ;-)

var thumbTemplate = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="images/{[values.name.replace(/ /g, "-")]}-1.jpg" class="thumb-img"></div>',

var allStore = new Ext.data.ArrayStore({
proxy: new Ext.data.MemoryProxy(),
fields: ['name', 'livingArea', 'stories', 'externalDimensions', 'houseType', 'price'],
sortInfo: {
field: 'name',
direction: 'ASC'

['Bungalow S', '88', '1', '13 x 7,7', 'bungalow', '129.000'],
['Family L', '126', '2', '7,9 x 9,1', 'classic', '199.000']

var allView = new Ext.DataView({
store: allStore,
tpl: thumbTemplate,
id: 'all',
itemSelector: 'house',
overClass: 'house-hover',
singleSelect: true,
autoScroll: true,

Ext.ux.HouseType = new Ext.extend(Ext.TabPanel, {
border: true,
initComponent: function() {
var config = {
id: 'housetype',
title: 'House type',
width: 375,
activeTab: 0,
enableTabScroll: true,
defaults: {
autoScroll: true
items: [
title: 'All',
id: 'all',
items: <== should list all items from allStore
title: 'Bungalows',
id: 'bungalow',
items: <== should list all items with houseType = 'bungalow'
title: 'Classic',
id: 'classic',
items: <== should list all items with houseType = 'classic'
] // eo items
}; // eo config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ext.ux.HouseType.superclass.initComponent.apply(this, arguments);
}, // eo initComponent
onRender: function() {
Ext.ux.HouseType.superclass.onRender.apply(this, arguments);
}); // eo Ext.ux.HouseType

Ext.reg('housetype', Ext.ux.HouseType);

Any hints how to realize that? My last try was to create an own store and dataview for each tab (= each houseType) but I'm sure that's not the way Ext is made for ;-)