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

最新推荐文章于 2020-12-23 17:50:18 发布

walkerJong

最新推荐文章于 2020-12-23 17:50:18 发布

阅读量3.3k

点赞数 2

分类专栏： extjs

本文链接：https://blog.csdn.net/walkerJong/article/details/7894845

版权

本文探讨了在Extjs中处理数据模型的从属关系，即数据嵌套问题。首先介绍了需求背景，例如项目与项目成员之间的hasMany关系。接着详细解释了Extjs Model的定义，包括model、primaryKey、foreignKey等属性的作用，并提供了Project和ProjectMember的模型定义示例。此外，还提及了associationKey在Reader中获取数据的作用。最后，给出了加载嵌套数据的store和页面运行代码片段。

摘要由CSDN通过智能技术生成

最近项目中用到了Extjs，刚好碰到了一个问题就是数据模型的从属关系(association)，就是我们常说的数据嵌套。本篇文章分两部分，第一部分讲解嵌套数据模型的定义；第二部分讲解嵌套数据模型的显示。

需求描述：现在有一个项目，项目下有n个成员。

Project:

projectId, projectName, projectManager

ProjectMember

memberId, memberName, projectId

项目成员从属于项目，是 project hasMany member 的关系。

Extjs的Model定义如下：

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

这里需要说明下belongsTo的属性定义：

model：指定定义的model从属与哪一个model类型；

primaryKey：定义的model中主键属性，若没有指定默认为id；

foreignKey: 定义的模型中从属模型的id，若没有定义则为"从属模型的小写名字_id"，此处为"project_id";

更为详细的信息，可查询api获得。

Project在Extjs中的模型定义：

/**
 * 项目model定义
 */
Ext.define('Project', {
		extend: 'Ext.data.Model',
		fields: [{
					name : 'projectId',			//项目id
					type : 'string'
				}, {
					name : 'projectName',		//项目名称
					type : 'string'
				}, {
					name : 'projectManager',	//项目主管
					type : 'string'
				}],
		hasMany: {
					model: 'ProjectMember',
					name: 'members',  			//访问member的方法
					associationKey: 'memberList'  //读取数据的property
				}
	});