Results 1 to 2 of 2

Thread: Convert List to Nested List with <tpl>

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    1
    Vote Rating
    0
      0  

    Default 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 - Community Support Team mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,023
    Answers
    3976
    Vote Rating
    1334
      0  

    Default

    So you want to show an array within a list item?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •