PDA

View Full Version : Advanced DataView/XTemplate usage



eztam
5 Nov 2010, 12:00 AM
Hi,
I've got a problem with the template of my DataView.



var store = new Ext.data.JsonStore({...});

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="layer == 0">',
'<div class="wrap">',
'<tpl for=".">',
'<tpl if="layer == 1">',
'<span class="sub">{parent.name}: {name}</span>',
'</tpl>',
'</tpl>',
'</div>',
'</tpl>',
'</tpl>'
);

var dv = new Ext.DataView({
store: store
tpl: tpl,
itemSelector: 'div.wrap'
});

The problem is that the 'if="layer == 0"' filters the values (I think) and the inner 'for="."' loop doesn't contain all values of the store.
Has anyone an idea how I can do things like this?

Condor
5 Nov 2010, 12:22 AM
DataView requires that there always is ONE element that matches the itemSelector for every record in the store.

Can you move the <div class="wrap"> outside the layout==0 check? You could make the div display:none for records where layer!=0.

eztam
5 Nov 2010, 6:16 AM
DataView requires that there always is ONE element that matches the itemSelector for every record in the store.

Can you move the <div class="wrap"> outside the layout==0 check? You could make the div display:none for records where layer!=0.
Thanks, but this didn't solve my problem.

This little workaround did the job, but is still not the best solution:


var store = new Ext.data.JsonStore({...});

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="layer == 0">',
'<div class="wrap">',
'<tpl for="this.subLayer">',
'<tpl if="layer == 1">',
'<span class="sub">{parent.name}: {name}</span>',
'</tpl>',
'</tpl>',
'</div>',
'</tpl>',
'</tpl>'
);

var dv = new Ext.DataView({
store: store
tpl: tpl,
itemSelector: 'div.wrap'
});

Ext.apply(tpl, {
subLayer: dv.collectData(this.store.getRange())
});

Condor
5 Nov 2010, 6:35 AM
What exactly is your data and how do you want it displayed by the DataView?

eztam
5 Nov 2010, 7:10 AM
I switched to only use XTemplate and do not use the DataView anymore.
Because I only want to get an output of the data, but I don't need to select them or anything else.

I extended the XTemplate to my needs, for example I implemented the collectData function and now I'm filtering the store to my needs for every layer to not iterate through the complete items.