Template in NestedList

[Carlos.D]

Hi guys,

Do someone known how to build a template for a NestedList, like for a List (itemTpl) ?

Thx


var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
}, {
text: 'Still',
leaf: true
}]
}, {
text: 'Coffee',
leaf: true
}, {
text: 'Espresso',
leaf: true
}, {
text: 'Redbull',
leaf: true
}, {
text: 'Coke',
leaf: true
}, {
text: 'Diet Coke',
leaf: true
}]
}, {
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
}, {
text: 'Lemon',
leaf: true
}]
}, {
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
}, {
text: 'Pretzels',
leaf: true
}, {
text: 'Wasabi Peas',
leaf: true
}]
}]
};


Ext.regModel('ListItem', {
fields: [{
name: 'text',
type: 'string'
}]
});


var store = new Ext.data.TreeStore({
model: 'ListItem',
defaultRootProperty: 'items',
root: data
});


var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Groceries',
displayField: 'text',
store: store,
itemTpl: ['{text} my template']
});

[mitchellsimoens]

To do this currently, you have to override the getItemTextTpl method on the NestedList. Currently this is how it is:


/**
* Override this method to provide custom template rendering of individual
* nodes. The template will receive all data within the Record and will also
* receive whether or not it is a leaf node.
* @param {Ext.data.Record} node
*/
getItemTextTpl: function(node) {
return '{' + this.getDisplayField() + '}';
},

[Carlos.D]

Thank Mitchell,

It works just fine.

Perhaps did you how a I can show the number of child the node have ?


Juste a another example for developper interested :



getItemTextTpl: function(node) {


return '<tpl if="leaf == false">'+
'<tpl switch="text">'+
'<tpl case="Drinks">'+
'<img src="stylesheets/img/drinks.png">{text}'+
'<tpl default>'+
'{text}'+
'</tpl>'+
'</tpl>'+
'<tpl if="leaf == true">'+
'{text}'+
'</tpl>';


},

[mitchellsimoens]

Each list of a NestedList is just a List using the template from getItemTextTpl and passing in the node. So the only way I know to do it easily is to pass the number as a new field in from your server side code.