PDA

View Full Version : Xtemplate - how to add headings to multiple categories



karstenvennemann
7 Sep 2011, 12:39 AM
I got the Xtemplate below and the data store to work, but I was wondering how I could add headings to multiple categories. Right now the output looks like this:
Aegilops triuncialis barb goatgrass High 104
Arundo donax giant reed High 3
Bromus madritensis ssp. rubens red brome High 6
Cirsium arvense Canada thistle Moderate 16
Cirsium vulgare bull thistle Low 17
Conium maculatum poison-hemlock Low 18

I would like to have is this:
High
Aegilops triuncialis barb goatgrass High 104
Arundo donax giant reed High 3
Bromus madritensis ssp. rubens red brome High 6

Moderate
Cirsium arvense Canada thistle Moderate 16

Low
Cirsium vulgare bull thistle Low 17
Conium maculatum poison-hemlock Low 18

How can I change my template to accomplish that :-? ?



var store = new Ext.data.JsonStore({
url: 'summary_detail.php,
root: 'data',
fields: ['name', 'commonname', 'rating', 'id']
});
store.load();
var tpl = new Ext.XTemplate(
'<div id="species_list">',
'<tpl for=".">',
'<tpl if="calipcrating ==\'High\'">',
'<div id="{name}">{name} {commonname} {rating} {id}</div></tpl>',
'<tpl if="calipcrating ==\'Moderate\'">',
'<div id="{name}">{name} {commonname} {rating} {id}</div></tpl>',
'<tpl if="calipcrating ==\'Low\'">',
'<div id="{name}">{name} {commonname} {rating} {id}</div></tpl>',
'</tpl></div>'
);
tpl.compile();

sword-it
13 Aug 2012, 6:22 AM
Hi,
try this:

var store = new Ext.data.JsonStore({
url: 'summary_detail.php,
root: 'data',
fields: ['name', 'commonname', 'rating', 'id']
});
store.load();
var tpl = new Ext.XTemplate(
'<div id="species_list">',
'<div class="heading">High</div>',
'<tpl for=".">',
'<tpl if="calipcrating ==\'High\'"><div id="{name}">{name} {commonname} {rating} {id}</div></tpl>',
'</tpl>',
'<div class="heading">Moderate</div>',
'<tpl for=".">',
'<tpl if="calipcrating ==\'Moderate\'"><div id="{name}">{name} {commonname} {rating} {id}</div></tpl>',
'</tpl>',
'<div class="heading">Low</div>',
'<tpl for=".">',
'<tpl if="calipcrating ==\'Low\'"><div id="{name}">{name} {commonname} {rating} {id}</div></tpl>',
'</tpl>',
'</div>'
);
tpl.compile();

Regards.