Issue with Ext XTemplate

Question

I am trying to create a XTemplate to show the one-many relationship display for each item in dataview.

I want to display the TransactionType as Header of the list item and i have to loop through the ActionList for that ActionSummary and show each Action item name.

But below code fails.

Models

Action Model here

Ext.define('MyMobile.model.ActionModel', {
extend: 'Ext.data.Model',
config: {
    fields: [
        { name: 'Action', type: 'string' },            
        { name: 'Count', type: 'int' },            
        { name: 'Id', type: 'int' },
        { name: 'CurrentStatus', type: 'string' }
    ]
}
});

Action Summary Model

Ext.define('MyMobile.model.ActionSummaryModel', {
extend: 'Ext.data.Model',
config: {
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'TransactionType', type: 'string' }

    ]
    ,
    hasMany: {
        model: 'MyMobile.model.ActionModel',
        name: 'ActionList'
    }
}
});

Store

Ext.define('MyMobile.store.ActionSummaryStore', { extend: 'Ext.data.Store',

config: {
    model: 'MyMobile.model.ActionSummaryModel',

    proxy: {
        type: 'ajax',
        url: 'home/GetActionSummary',
        method: 'GET',
        reader: {
            type: 'json'
        }
    }
}
});

View

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

config: {
    title: 'Actions',

    store: 'ActionSummaryStore',
    emptyText: 'Loading action items...',
    itemTpl: Ext.create('Ext.XTemplate', '<tpl for=".">',
                                            '<div><p class="action-text">{TransactionType}</p>',
                                                  '<tpl for="ActionList"><tpl for=".">',       
                                                        '<p>{Action}</p>',  
                                                         '<span class="action-count">Count:{Count}</span><br>',
                                                         '<span class="action-status">Current Status: {CurrentStatus}</span>',
                                                    '</tpl></tpl>',          
                                             '</div>',
                                           '</tpl>'

                       )
 }
 });

JSON JSON is array of summary from server

[{"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"}]}]

If i hard code this JSON data instead of store it is working.

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

config: {
    title: 'Actions',


    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><p class="action-text">{TransactionType}</p>',
                                                  '<tpl for="ActionList"><tpl for=".">',  
                                                        '<p>{Action}</p>',  
                                                         '<span class="action-count">Count:{Count}</span><br>',
                                                         '<span class="action-status">Current Status: {CurrentStatus}</span>',
                                                    '</tpl></tpl>',          
                                             '</div>',
                                           '</tpl>'

                       )
}
});

I have no idea why the above XTemplate not working with JSON store. It shows only Transaction Type, mean header and not the nested items details. Please help on this.

Edit: After some time i realized Store is not loading with relationships. It is not showing ActionList under each ActionSummary. Is there any mapping issue?

Edit 2 I removed the hasMany mappings in ActionSummaryModel and added a field { name: 'ActionList', type: 'auto' } then it is working. But i would like to do it with relationships with hasMany and belongsTo. Your help appreciated!!

Eli Eli · Accepted Answer · 2012-10-18T15:23:20

I will list down all the steps to make your code working as following:

Firstly, add autoLoad in your store to automatically load the related store from a remote source when instantiated

model: 'MyMobile.model.ActionSummaryModel',
autoLoad: true

Secondly, you need to use associationKey which is the name of the property in the data to read the association from instead of name in your hasMany association:

hasMany: {
    model: 'MyMobile.model.ActionModel',
    associationKey: 'ActionList'
}

Finally, in your view you need to make some changes in your tpl by changing:

<tpl for="ActionList">

to the associated model name in plural:

<tpl for="actionmodels">

By the way, remember to include all your corresponding view, store and model in your app.js to make it works. Hope it helps :)

Issue with Ext XTemplate

1 Answers