How to show nested items in Sencha Touch list - json

Question

I have following json data.
{
"pendingTasksVOs" : [{
"groupName" : "LAST_MONTH",
"documents" : [{
"description" : "kvk1",
"uploadDate" : "1-12-2012"
}
]
}, {
"groupName" : "OLDER",
"documents" : [{
"description" : "kvk2",
"uploadDate" : "1-11-2012"
}, {
"description" : "kvk3",
"uploadDate" : "1-10-2012"
}, {
"description" : "kvk4",
"uploadDate" : "1-01-2012"
}
]
}
]
}
I want to show it in Sencha Touch list grouped by GroupName .
I want list to be in following format:
GoupName : Group1
-----------------------------
Description11 , UploadDate11 This should be separate clickable list row
-----------------------------
Description12 , UploadDate12 This should be separate clickable list row
-----------------------------
Description13 , UploadDate13 This should be separate clickable list row
-----------------------------
******************************
GoupName : Group2
-----------------------------
Description21 , UploadDate21 This should be separate clickable list row
-----------------------------
Description22 , UploadDate22 This should be separate clickable list row
-----------------------------
******************************
I am trying to use Sencha Touch List component. But I am not to get the list as per above requirements
//This is my store
var store = Ext.create('Ext.data.Store', {
model: 'Demo.model.DocumentList',
rootProperty: 'pendingTasksVOs',
autoLoad: true,
grouper: {
groupFn: function(record) {
if (record && record.data.title) {
return record.get('groupName');
} else {
return '';
}
}
}
});
//template for list item
var listTemplate = new Ext.XTemplate(
'<tpl for=".">',
'{groupName}</br>',
'<ul>',
'<tpl for="documents">',
'{description} {uploadDate} </br>',
'</tpl>',
'</ul>',
'</tpl>'
);
// Initialize the main view
Ext.getCmp("pendingTasksListId").add(Ext.create('Ext.List', {
fullscreen: true,
itemTpl: listTemplate,
store: store,
groupField:'description',
grouped: true
}));
//DocumentListModel is defined under /app/model/
Ext.define('Demo.model.DocumentList', {
extend: 'Ext.data.Model',
requires : ['Demo.model.Doc'],
config: {
fields: ['groupName', 'documents'],
hasMany : {
model : "Demo.model.Doc",
associationKey: 'documents'
},
proxy: {
type: 'rest',
url : "/getPendingTasks",
reader: {
type: 'json',
rootProperty : 'pendingTasksVOs'
}
}
}
}
//Document Model is defined under /app/model/
Ext.define('Demo.model.Doc', {
extend: 'Ext.data.Model',
config: {
fields: ['description', 'uploadDate'],
belongsTo: "Demo.model.DocumentList"
}
});
});
I am able to get the list item as follows:
GroupName,
Description11,UploadDate11
Description12,UploadDate12
But above whole content is clickable. I want to have each Description & UploadDate pair to be clickable.
Can anyone guide me on how can I achieve above stated requirement?

Answer 1

I got the solution for my question.
Create following custom json reader under /app/reader/ folder as CustomReader.js
Ext.define('Demo.reader.CustomReader', {
extend: 'Ext.data.reader.Json',
alias: 'reader.customReader',
getData: function(data) { // overriding
data = this.callParent(arguments);
var responseString = Ext.encode(data);
var json = JSON.parse(responseString);
var result = [];
Ext.each(json.pendingTasksVOs, function(entry) {
var groupName = entry.groupName;
Ext.each(entry.documents || [], function(document) {
result.push({
description : document.description,
uploadDate: document.uploadDate,
groupName: groupName
});
});
});
return result;
}
});
Doc model should be created at /app/model as follows as Doc.js
Ext.define('Demo.model.Doc', {
extend: 'Ext.data.Model',
config: {
fields: ['description','uploadDate','groupName']
}
});
Store can be created at /app/store folder
Store should use this custom reader as follows:
Ext.define("Demo.store.DocumentStore", {
extend:'Ext.data.Store',
requires:['Demo.model.Doc' , 'Ext.data.proxy.Rest', 'Demo.reader.CustomReader'],
id:'DocumentStore1',
config:{
model:'Demo.model.Doc',
autoLoad:true,
grouper:{
groupFn:function (record) {
if (record && record.data.groupName) {
return record.get('groupName');
} else {
return '';
}
}
},
proxy:{
type:'rest',
url:"/getPendingTasks",
reader:{
type:'customReader' //This is our custom reader
}
}
}
});
//Finally You can create the list as follows
Ext.create('Demo.store.DocumentStore');
// Initialize the main view
Ext.getCmp("pendingTasksListId").add(Ext.create('Ext.List', {
fullscreen:true,
itemTpl:'<div class="contact">{description} {uploadDate} {groupName} </div>',
store: 'DocumentStore1',
grouped:true
}));
Above gives me the list where I get separate row for each {description} {uploadDate} pair from the received json specified in question

Answer 2

Try this,
itemTpl: [
'<div>GroupName : {groupName}</div>',
'<div>',
'<ul>',
'<tpl for="documents">',
'<li>{description} , {uploadDate}</li>',
'</tpl>',
'</ul>',
'</div>',
].join('')
OR this,
itemTpl: [
'<div>GroupName : {groupName}</div>',
'<div>',
'<ul>',
'<tpl for="documents">',
'<li><div onclick="whateverYouWantToDo()">{description} , {uploadDate}</div></li>',
'</tpl>',
'</ul>',
'</div>',
].join('')