Question

Here is my Sencha Touch 2 code which shows the JSON list data in the Ext.data.List component. I have used tpl for creating listed items. Now i am in the need of conveting this List to Nested List. But failed and i have no idea how can i move the list view’s itemTpl to Nest List’s getItemTextTpl?

Code with List

    Ext.define('Mobile.view.ActionListView', {
        extend: 'Ext.dataview.List',
        xtype: 'actionsummary',
        id: 'actionsummaryList',

        config: {
            title: 'Actions',

            store: 'ActionSummaryStore',
            //data:[{"Id":1,"TransactionType":"Transaction 1","ActionList":[{"Id":1,"Count":4,"Action":"Action Item 1","CurrentStatus":"Open"},{"Id":2,"Count":14,"Action":"Action Item 3","CurrentStatus":"Open"},{"Id":3,"Count":44,"Action":"Action Item 5","CurrentStatus":"Close"}]}],
            emptyText: 'Loading action items...',
            itemTpl: Ext.create('Ext.XTemplate', '<tpl for=".">',
                                                    '<div class="action-item-container"><p class="action-text">{TransactionType}</p>',
                                                          '<tpl for="ActionList"><tpl for=".">',
                                                                '<div><ul>',
                                                                   '<li><a href="javascript:void(0)"><span class="action-count">{CurrentStatus}<tt>({Count})</tt></span><span class="btn-{Action}">{Action}</span></a></li>',                                                               

                                                                 '</ul></div>',
                                                            '</tpl></tpl>',
                                                     '</div>',
                                                   '</tpl>'

                               )
        }
    });

New Code with Nested List

    Ext.define('Mobile.view.ActionListView', {
        extend: 'Ext.dataview.NestedList',
        xtype: 'actionsummary',
        id: 'actionsummaryList',

        config: {
            title: 'Actions',

            store: 'ActionSummaryStore',
            useTitleAsBackText: false,
            onItemDisclosure: true,

            //data:[{"Id":1,"TransactionType":"Transaction 1","ActionList":[{"Id":1,"Count":4,"Action":"Action Item 1","CurrentStatus":"Open"},{"Id":2,"Count":14,"Action":"Action Item 3","CurrentStatus":"Open"},{"Id":3,"Count":44,"Action":"Action Item 5","CurrentStatus":"Close"}]}],

            itemTpl: Ext.create('Ext.XTemplate', '<tpl for=".">',
                                                    '<div class="action-item-container"><p class="action-text">{TransactionType}</p>',
                                                          '<tpl for="ActionList"><tpl for=".">',
                                                                '<div><ul>',
                                                                   '<li><a href="javascript:void(0)"><span class="action-count">{CurrentStatus}<tt>({Count})</tt></span><span class="btn-{Action}">{Action}</span></a></li>',

                                                                 '</ul></div>',
                                                            '</tpl></tpl>',
                                                     '</div>',
                                                   '</tpl>'

                               )
        },

        getTitleTextTpl: function () {
            return 'Summary View';
        },
        getItemTextTpl: function (node) {
           // return '<div><strong>{name}:</strong> <em>{description}</em></div>';
           //replace this code with my above itemTPL
        }
    });

Answer 1

With this kind of model, I wouldn’t use a NestedList but something like this

Check this answer : Nested List, Multiple Layouts

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'SenchaFiddle',

    launch: function() {

        var navigationview = Ext.create('Ext.navigation.View', {
            fullscreen: true,
            autoDestroy: false
        });

        var data = {
            BranchID : 4,
            BranchName : "Branch Name",
            Jobs : [{
                JobOrderID : 75,
                JobTitle : "Job Title 75",
                leaf : true
            },{
                JobOrderID : 76,
                JobTitle : "Job Title 76",
                leaf : true
            }]

        };

        Ext.define('Job', {
            extend: 'Ext.data.Model',
            config: {
                fields: ['JobOrderID', 'JobTitle']
            }
        });

        Ext.define('Branch', {
            extend: 'Ext.data.Model',
            config: {
                fields: ['BranchID', 'BranchName']
            },
            hasMany: {associatedModel: 'Job', name: 'jobs'}

        });

        var branchstore = Ext.create('Ext.data.Store', {
            model: 'Branch',
            data: data
        });

        var jobstore = Ext.create('Ext.data.Store', {
            model: 'Job',
        });

        var jobdetails = Ext.create('Ext.Container',{

        });

        var joblist = Ext.create('Ext.List',{
            title:'Jobs',
            itemTpl: '{JobTitle}',
            store: jobstore,
            listeners: {
                itemtap: function(l,i,t,r,e) {
                    jobdetails.setHtml(r.get('JobOrderID')+': '+r.get('JobTitle'));
                    navigationview.push(jobdetails);
                }
            }
        });

        var branchlist = Ext.create('Ext.List',{
            title:'Branches',
            itemTpl: '{BranchName}',
            store: branchstore,
            listeners: {
                itemtap: function(l,i,t,r,e) {
                    jobstore.setData(r.raw.Jobs);
                    navigationview.push(joblist);
                }
            }
        });

        navigationview.push(branchlist);
    }
});