PDA

View Full Version : Dataview & XTemplate conditional layout



jschiffer
17 May 2013, 10:06 AM
Hi,

I am using a dataview to render a series of images using XTemplate, and based on their (json defined) type, I want to divide the images and append them onto separate parent divs for grouping. I do this (incorrectly) by looping though the dataview records in the template and if the record type matches in a conditional, adding the rendered image node as a child of that parent div.
The catch is that the dataview retains the index reference to the node as if it were still in the record order. This means the third element in the first parent, which may have been appended due to type in a different order, when queried for record is mismatched to the data that is displayed.

As I mentioned, I implement this incorrectly as seen here:


var tpl = new Ext.XTemplate(//loses index... dataview sees the index as the position of the rendered element

'<div style="width:100%;background-color:silver" class="toolbox iconContainer buttonComponents">',
'<h2>Buttons</h2>',
'<tpl for=".">',
'<tpl if="type==\'button\'">',
'<div class="thumb">',
'<img class="thumbImg" src="{icon}" title="{name}"/>',
'<div class="infoOverlay"></div>',
'<p>{fieldname},{componentid},{#}</p>',
'</div>',
'</tpl>',
'</tpl>',
'</div>',


'<div style="width:100%;background-color:red;display:block" class="toolbox iconContainer elementComponents">',
'<h2>Element</h2>',
'<tpl for=".">',
'<tpl if="type==\'element\'">',
'<div class="thumb">',
'<img class="thumbImg" src="{icon}" title="{name}"/>',
'<div class="infoOverlay"></div>',
'<p>{fieldname},cid:{componentid},index:{#}</p>',
'</div>',
'</tpl>',
'</tpl>',
'</div>',


'<div style="width:100%;background-color:green" class="toolbox iconContainer placementComponents">',
'<h2>Placements</h2>',
'<tpl for=".">',
'<tpl if="type==\'placement\'">',
'<div class="thumb">',
'<img class="thumbImg" src="{icon}" title="{name}"/>',
'<div class="infoOverlay"></div>',
'<p>{fieldname},{componentid},{#}</p>',
'</div>',
'</tpl>',
'</tpl>',
'</div>',

'<div style="width:100%;background-color:blue;display:block" class="toolbox iconContainer privateComponents">',
'<h2>Private</h2>',
'<tpl for=".">',
'<tpl if="type==\'private\'">',
'<div class="thumb">',
'<img class="thumbImg" src="{icon}" title="{name}"/>',
'<div class="infoOverlay"></div>',
'<p>{fieldname},{componentid},{#}</p>',
'</div>',
'</tpl>',
'</tpl>',
'</div>'//,

// '</tpl>'
,{
compiled:true
});


I believe the intent of my template is clear, as is the incorrectness of looping multiple times; it yields the correct visual results, but the indexes are out of sync.

Any insight as to how to do this effectively and peripherally, more efficiently, is greatly appreciated.