Json 如何在Sencha触摸列表中显示嵌套项

我有以下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触摸列表中显示它

我希望列表采用以下格式：

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 ----------------------------- ****************************** GoupName:Group1 ----------------------------- 说明11，上载日期11这应该是单独的可单击列表行 ----------------------------- 说明12，上载日期12这应该是单独的可单击列表行 ----------------------------- 说明13，上载日期13这应该是单独的可单击列表行 ----------------------------- ****************************** GoupName:Group2 ----------------------------- 说明21，上载日期21这应该是单独的可单击列表行 ----------------------------- 描述22，上载日期22这应该是单独的可单击列表行 ----------------------------- ****************************** 我正在尝试使用Sencha触摸列表组件。但我不能按照上述要求得到这份清单

//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"
}   
}); 
});

//这是我的商店
var store=Ext.create（'Ext.data.store'{
模型：“Demo.model.DocumentList”，
rootProperty:'pendingTasksVOs'，
自动加载：对，
石斑鱼：{
groupFn：函数（记录）{
if（记录和记录.data.title）{
return record.get（'groupName'）；
}否则{
返回“”；
}
}
}           
});
//列表项的模板
var listTemplate=新的Ext.XTemplate（
'',
“{groupName}
”，
“
”，
'',
“{description}{uploadDate}
”，
'',
“
”，
''                                            
);
//初始化主视图
Ext.getCmp（“PendingTaskListId”）.add（Ext.create（'Ext.List'）{
全屏：对，
itemTpl:listTemplate，
店:店,，
组字段：'description'，
分组：对
}));
//DocumentListModel在/app/model/下定义
Ext.define（'Demo.model.DocumentList'{
扩展：“Ext.data.Model”，
需要：['Demo.model.Doc']，
配置：{
字段：['groupName'，'documents']，
有很多：{
模型：“Demo.model.Doc”，
associationKey:“文档”
},
代理：{
键入：“rest”，
url:“/getPendingTasks”，
读者：{
键入：“json”，
rootProperty:“PendingTaskVos”
}
}       
}
}
//文档模型在/app/Model/下定义
Ext.define（'Demo.model.Doc'{
扩展：“Ext.data.Model”，
配置：{
字段：['description'，'uploadDate']，
belongsTo:“Demo.model.DocumentList”
}   
}); 
});

我可以得到如下列表项：

GroupName, Description11,UploadDate11 Description12,UploadDate12

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         
        }
    }
}
});

组名， 说明11，上载日期11 说明12，上载日期12 但以上全部内容都是可点击的。我想让每个描述和上传日期对都可以点击

有人能指导我如何达到上述要求吗

试试这个

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

itemTpl:[
'GroupName:{GroupName}'，
'',
“
”，
'',
“
{description}，{uploadDate}
”，
'',
“
”，
'',
].加入（“”）

或者这个,

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

itemTpl:[
'GroupName:{GroupName}'，
'',
“
”，
'',
“
{description}，{uploadDate}
”，
'',
“
”，
'',
].加入（“”）

我找到了问题的答案

在/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.js

Ext.define('Demo.model.Doc', {
extend: 'Ext.data.Model',    
config: {
     fields: ['description','uploadDate','groupName']       
}
});

可以在/app/Store文件夹中创建存储 存储应按如下方式使用此自定义读取器：

GroupName, Description11,UploadDate11 Description12,UploadDate12

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
}));    

Ext.create（'Demo.store.DocumentStore'）；
//初始化主视图
Ext.getCmp（“PendingTaskListId”）.add（Ext.create（'Ext.List'）{
全屏：对，
itemTpl:“{description}{uploadDate}{groupName}”，
存储区：“DocumentStore1”，
分组：对
}));    

---

上面给出了一个列表，在该列表中，我从问题中指定的接收到的json中为每个{description}{uploadDate}对获取单独的行

谢谢您的回答，I29。有了这个，我可以获得{description}，{uploadDate}div的OnClick。知道这个信息很好。但该列表是按组名显示的。换句话说，我仍然无法为每个{description}、{uploadDate}对获取单独的行。可选行仍然显示组名下的所有{description}、{uploadDate}对。我的要求是，它应该为每个{description}、{uploadDate}对获取单独的行