1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    1
    Vote Rating
    0
    Murali.m84 is on a distinguished road

      0  

    Default Unanswered: Convert List to Nested List with <tpl>

    Unanswered: Convert List to Nested List with <tpl>


    I would like to convert my list configured with below code to Nested 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>'


    )
    }
    });

    Can any one help me out? I posted the same question with the code i tried in Stackoverflow

    This is what i am trying


    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 } });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    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


    So you want to show an array within a list item?
    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.