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

来源：互联网发布：淘宝聚星台是什么编辑：程序博客网时间：2024/06/06 14:04

最近项目中用到了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',//项目成员Idtype : 'string'}, {name : 'memberName',//项目成员姓名type : 'string'}, {name : 'projectId',//项目idtype : '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',//项目idtype : 'string'}, {name : 'projectName',//项目名称type : 'string'}, {name : 'projectManager',//项目主管type : 'string'}],hasMany: {model: 'ProjectMember',name: 'members',  //访问member的方法associationKey: 'memberList'  //读取数据的property}});

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

model：指定从属与它的模型名称，这里从属于项目的model是项目成员model；

name: 定义了访问从属成员的方法，若没有定义默认为从属model类型的复数（此处为projectmembers）；

associationKey: 指定Reader读取数据的来源,即从数据中哪一个属性里取数据。若没有指定默认为name属性的值。

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

测试数据：

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};

加载数据的store：

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({//数据加载完成后调用callback: function(){//遍历store的数据projectStore.each(function(record){document.write("projectId="+record.get("projectId")+", projectName="+record.get("projectName")+",projectManager="+record.get("projectManager")+"<br />");var members = record.members();document.write("members.size="+members.getCount()+"<br />");members.each(function(record){document.write("memberId="+record.get("memberId")+", memberName="+record.get("memberName")+", projectId="+record.get("projectId")+"<br />");});document.write("<br />");return true;});}});

完整的在页面里可运行的代码：

testModel.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </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',//项目成员Idtype : 'string'}, {name : 'memberName',//项目成员姓名type : 'string'}, {name : 'projectId',//项目idtype : 'string'}],belongsTo: {model        : 'Project',primaryKey   : 'memberId',foreignKey   : 'projectId'}});/** * 项目model定义 */Ext.define('Project', {extend: 'Ext.data.Model',fields: [{name : 'projectId',//项目idtype : 'string'}, {name : 'projectName',//项目名称type : 'string'}, {name : 'projectManager',//项目主管type : 'string'}],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({//数据加载完成后调用callback: function(){//遍历store的数据projectStore.each(function(record){document.write("projectId="+record.get("projectId")+", projectName="+record.get("projectName")+",projectManager="+record.get("projectManager")+"<br />");var members = record.members();document.write("members.size="+members.getCount()+"<br />");members.each(function(record){document.write("memberId="+record.get("memberId")+", memberName="+record.get("memberName")+", projectId="+record.get("projectId")+"<br />");});document.write("<br />");return true;});}});  });    </script> </head> <body>  </body></html>

运行环境： Extjs 4.1.0
运行效果：如图

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

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