我有以下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"
}
]
}
]
}
我想在按GroupName分组的Sencha Touch列表中显示它。
我希望列表采用以下格式:
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 ----------------------------- ******************************
我正在尝试使用Sencha Touch List组件。但我不是按照上述要求获得清单
//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"
}
});
});
我可以按如下方式获取列表项:
GroupName, Description11,UploadDate11 Description12,UploadDate12
但是上面的内容是可点击的。我想要每个描述&amp; UploadDate对可以点击。
任何人都可以指导我如何达到上述要求?
答案 0 :(得分:1)
我得到了我的问题的解决方案。
在/ 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;
}
});
应在/ app / model创建Doc模型,如下所示为Doc.js
Ext.define('Demo.model.Doc', {
extend: 'Ext.data.Model',
config: {
fields: ['description','uploadDate','groupName']
}
});
可以在/ 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
}
}
}
});
//最后您可以按如下方式创建列表
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
}));
上面给出了我从列表中收到的每个{description} {uploadDate}对获得单独行的列表
答案 1 :(得分:0)
试试这个,
itemTpl: [
'<div>GroupName : {groupName}</div>',
'<div>',
'<ul>',
'<tpl for="documents">',
'<li>{description} , {uploadDate}</li>',
'</tpl>',
'</ul>',
'</div>',
].join('')
或者,
itemTpl: [
'<div>GroupName : {groupName}</div>',
'<div>',
'<ul>',
'<tpl for="documents">',
'<li><div onclick="whateverYouWantToDo()">{description} , {uploadDate}</div></li>',
'</tpl>',
'</ul>',
'</div>',
].join('')