在前一篇文章中,讲解了嵌套数据的模型定义,本篇文章主要讲解怎样在Ext.grid.Panel中显示嵌套的数据。
需求描述:
在Ext.grid.Panel中把定义的Project显示出来,项目成员显示在一列中。
因此需要稍微修改Model的定义,增加一个虚拟列:allMembers
/**
* 项目model定义
*/
Ext.define('Project', {
extend : 'Ext.data.Model',
fields : [ {
name : 'projectId', //项目id
type : 'string'
}, {
name : 'projectName', //项目名称
type : 'string'
}, {
name : 'projectManager', //项目主管
type : 'string'
}, {
name : 'allMembers', //项目成员列表
type : 'string',
convert : function(value, record) {
var members = record.raw.memberList;
var tempList = "";
Ext.Array.forEach(members, function(item, index, allItems) {
tempList += (item.memberName + " ");
});
return tempList;
}
}],
hasMany : {
model : 'ProjectMember',
name : 'members' //访问member的方法
associationKey : 'memberList' //读取数据的property
}
});
虚拟列中使用 convert属性,定义需要显示的内容,把member成员拼接成一个字符串,以便在Ext.grid.Panel中显示。
注: record最好使用 record.raw.members的数据。
加上显示面板:
//项目列表
var projectPanel = Ext.create('Ext.grid.Panel', {
store : projectStore,
width : document.body.clientWidth * 0.98,
padding : '8 0 0 0',
collapsible : true,
renderTo : Ext.g