如何在Sencha觸摸列表中顯示嵌套項目

Question

我有以下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 
----------------------------- 
****************************** 

我試圖用煎茶觸摸列表組件。但我不是以獲取列表按上述要求

//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 

但上述全部內容是點擊。我希望每個說明& UploadDate對都可點擊。

任何人都可以指導我如何達到上述要求？

Answer 1

我得到了我的問題解決方案。

創建以下自定義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.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 
}));  

上面給我從哪裏獲得單獨的行從接收到的JSON每個{說明} {} uploadDate對有關規定

Answer 2

試試這個，

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

OR此，

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