[英]How to show nested items in Sencha Touch list
I have following json data. 我有以下json数据。
{
"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 . 我想在按GroupName分组的Sencha Touch列表中显示它。
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. 我正在尝试使用Sencha触摸列表组件。 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? 谁能指导我如何达到上述要求?
I got the solution for my question. 我为我的问题找到了解决方案。
Create following custom json reader under /app/reader/ folder as CustomReader.js 在/ app / reader /文件夹下创建以下自定义json阅读器作为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 Doc模型应在Doc.js中的/ app / model中创建
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: 可以在/ app / store文件夹中创建商店,商店应使用此自定义阅读器,如下所示:
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 上面列出了我从接收到的有问题的json中获取每个{description} {uploadDate}对的单独行的列表
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('')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.