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

最新推荐文章于 2019-07-05 15:00:42 发布

原创最新推荐文章于 2019-07-05 15:00:42 发布 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #string #function #flex #stylesheet #generator

extjs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Ext.grid.Panel中展示嵌套数据，特别是项目成员信息。通过调整Model定义，添加虚拟列'allMembers'来利用record.raw.members数据。在显示面板的实现中，使用Field的mapping或convert属性来处理数据拼接，以适应不同显示需求。

在前一篇文章中，讲解了嵌套数据的模型定义，本篇文章主要讲解怎样在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.getBody(),
			title : '项目列表',
			stateful : true,
			stripeRows : true,
			columnLines : true,
			selModel : Ext.create('Ext.selection.CheckboxModel', {
				mode : 'SINGLE'
			}),
			columns : [ {
				text : '项目名称',
				dataIndex : 'projectName',
				sortable : true,
				align : 'center',
				flex : 1
			}, {
				text : '项目主管',
				dataIndex : 'projectManager',
				sortable : true,
				align : 'center',
				flex : 1
			}, {
				text : '项目成员',
				dataIndex : 'allMembers',
				sortable : true,
				align : 'center',
				flex : 1
			} ],
			bbar : Ext.create('Ext.PagingToolbar', {
				store : projectStore,
				autoScroll : true,
				displayInfo : true,
				displayMsg : '当前显示 {0} - {1}  共{2}',
				emptyMsg : "没有记录"
			}),
			listeners : {
				selectionchange : function(model, records) {

				}
			}
		});
		
	});

完整的可执行代码：modelDisplay.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>显示嵌套Model数据</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css"	href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">
	Ext.onReady(function() {

		/**
		 * 项目成员model定义
		 */
		Ext.define('ProjectMember', {
			extend : 'Ext.data.Model',
			fields : [ {
				name : 'memberId', //项目成员Id
				type : 'string'
			}, {
				name : 'memberName', //项目成员姓名
				type : 'string'
			}, {
				name : 'projectId', //项目id
				type : 'string'
			} ],
			belongsTo : {
				model : 'Project',
				primaryKey : 'memberId',
				foreignKey : 'projectId'
			}
		});

		/**
		 * 项目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
			}
		});

		var testData = {
			"projects" : [ {
				"projectId" : "1",
				"projectName" : "内存项目-1",
				"projectManager" : "刘志远",
				"memberList" : [ {
					"memberId" : "FANGHJ",
					"memberName" : "方浩江",
					"projectId" : "1"
				}, {
					"memberId" : "ZHAOKUN",
					"memberName" : "赵琨",
					"projectId" : "1"
				} ]
			}, {
				"projectId" : "2",
				"projectName" : "内存项目-2",
				"projectManager" : "刘志远",
				"memberList" : [ {
					"memberId" : "LIUFENG",
					"memberName" : "刘凤",
					"projectId" : "2"
				}, {
					"memberId" : "ZHAOKUN",
					"memberName" : "赵琨",
					"projectId" : "2"
				} ]
			}, {
				"projectId" : "3",
				"projectName" : "内存项目-3",
				"projectManager" : "刘志远",
				"memberList" : [ {
					"memberId" : "FANGHJ",
					"memberName" : "方浩江",
					"projectId" : "3"
				}, {
					"memberId" : "ZHAOKUN",
					"memberName" : "赵琨",
					"projectId" : "3"
				}, {
					"memberId" : "CUILT",
					"memberName" : "崔凌涛",
					"projectId" : "3"
				} ]
			} ],
			"totalCount" : 3
		};

		var projectStore = Ext.create('Ext.data.Store', {
			model : 'Project',
			pageSize : 10,
			proxy : {
				type : 'memory',
				data : testData,
				reader : {
					type : 'json',
					root : 'projects',
					totalProperty : 'totalCount'
				}
			}
		});
	
		projectStore.load();	

		//项目列表
		var projectPanel = Ext.create('Ext.grid.Panel', {
			store : projectStore,
			width : document.body.clientWidth * 0.98,
			padding : '8 0 0 0',
			collapsible : true,
			renderTo : Ext.getBody(),
			title : '项目列表',
			stateful : true,
			stripeRows : true,
			columnLines : true,
			selModel : Ext.create('Ext.selection.CheckboxModel', {
				mode : 'SINGLE'
			}),
			columns : [ {
				text : '项目名称',
				dataIndex : 'projectName',
				sortable : true,
				align : 'center',
				flex : 1
			}, {
				text : '项目主管',
				dataIndex : 'projectManager',
				sortable : true,
				align : 'center',
				flex : 1
			}, {
				text : '项目成员',
				dataIndex : 'allMembers',
				sortable : true,
				align : 'center',
				flex : 1
			} ],
			bbar : Ext.create('Ext.PagingToolbar', {
				store : projectStore,
				autoScroll : true,
				displayInfo : true,
				displayMsg : '当前显示 {0} - {1}  共{2}',
				emptyMsg : "没有记录"
			}),
			listeners : {
				selectionchange : function(model, records) {

				}
			}
		});
		
	});
</script>
</head>

<body>
</body>
</html>

注意：加入对extjs包中的引用的那两个文件。

显示的效果图，如下：