1. #1
    Sencha Premium Member Carlos.D's Avatar
    Join Date
    Nov 2011
    Location
    Luxembourg
    Posts
    38
    Vote Rating
    1
    Carlos.D is on a distinguished road

      0  

    Default Template in NestedList

    Template in NestedList


    Hi guys,

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

    Thx

    Code:
            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']
                 });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,398
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Code:
        /**
         * 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() + '}';
        },
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member Carlos.D's Avatar
    Join Date
    Nov 2011
    Location
    Luxembourg
    Posts
    38
    Vote Rating
    1
    Carlos.D is on a distinguished road

      0  

    Default


    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 :

    Code:
    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>';
    
    
    			     },

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,398
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread