Extjs嵌套数据类型定义和显示 （二）

在前一篇文章中，讲解了嵌套数据的模型定义，本篇文章主要讲解怎样在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