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.