[Ext JS 7] 关联（Association）| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 7] 关联（Association）

## [Ext JS 7] 关联（Association）
### 关联（Association）的概念与示例
Association用于描述不同模型类之间的关联。
比如有如下关系：
![](/upload/picture/2022-09-30/upload_ab004ce577e4ae8b4cf4e2028d03e4cc.png)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fTwUxzit-1590073083528)(images/screenshot_1590071454442.png)]
如果后端返回以下格式的JSON数据， 前端如何定义关联模型呢？
```javascript
var datas = [
{
	"id": 1,
	"name": "蜀",
	"generals": [
	{                
	"id": 101,
	"name": "刘备"
	},{                
	"id": 102,
	"name": "关羽"            
	}        
]    
}]
```

### 关联模型类定义
```javascript
//王国类        
Ext.define('Kingdom', {
	extend: 'Ext.data.Model',
	fields: ['id', 'name']
	});        //将军类        
	Ext.define('General', {
	extend: 'Ext.data.Model',            
	fields: ['id', 'name', 
	{name: 'kingdomId',
	reference: 'Kingdom' //关联                
	}]        
});
```
关键： 在General类中，多定义一个栏位kingdomId，使用reference指定关联的其他的类名。（此处是实现关联的定义方式的一种）
使用内存类型的Store测试关联
```javascript
 var kingdomStore = new Ext.data.Store({
 model: 'Kingdom',
 data: datas,
 autoLoad: true,
 proxy: {
 type: 'memory',
 reader: {
 type: 'json'
 }            
 }        
 });        
 var firstKingdom = kingdomStore.first(); //获取Store的第一个记录        console.log(firstKingdom.get("name")); //控制台打印        
 var generalStore = firstKingdom.generals(); //generals()， 自动产生的方法， 获取关联的Store   
 var firstGeneral = generalStore.first();  //关联Store的第一个记录        
 console.log(generalStore.getCount()+":"+firstGeneral.get("name")); //
```

### 注意：
为演示方便，这里使用memory类型的代理获取内联的数据，这里必须要设置proxy，否则取不到关联的数据。
.generals() 是框架自动产生的方法， 用户获取关联的数据，返回的类型是Store， 可以通过Store相关的方法获取关联数据。
关联相关的框架类
关联(Association)相关的类的定义是在Ext.data.schema包中，比如 Ext.data.schema.Association，关于Schema的介绍参加第7章。
关联类不单独使用，而是通过Ext.data.Model进行构造。关联相关的类包括：
Ext.data.schema.Association
Ext.data.schema.ManyToOne
Ext.data.schema.HasMany
Ext.data.schema.OneToOne
Ext.data.schema.HasOne
Ext.data.schema.ManyToMany
关联的实现方式
### 按键关联
定义： 使用模型的某个字段关联另外一个模型的id。
适用： 关系型数据库
用法： 在模型字段定义中使用reference配置。
### 无键关联
定义：通过数据的层级结构决定关系。
适用： 常用于NoSQL数据库中
用法： 使用模型的HasOne、HasMany和ManyToMany定义另外一个模型类。
### 关联的类型
根据关联双方的关联维度，关联分为：
多对一 Many To One
比如很多将军属于某一个王国。
定义方式：
按键关联： 使用Ext.data.schema.ManyToOne
无键关联：Ext.data.schema.HasMany
一对一 One To One
比如王国和都城的对应关系， 一对一关系更常使用在数据分片上，比如新定义一个KingdomInfo类，作为Kingdom类的补充。
按键关联： 使用 Ext.data.schema.OneToOne
无键关联：使用Ext.data.schema.HasOne
多对多 Many To Many
实例： 将军和战役的关联，一个将军会参加很多场战役，一场战役参战的将军也有多个。
使用 Ext.data.schema.ManyToMany，除非与Ext.data.Session一起使用，否则多对多关系是只读的。
### 关联的优势
Assocations 可以使共享同一个连接的多个模型变得容易处理具体包括：
自动产生取值和设值的方法
针对上面的示例：
自动产生generals(将军) 返回Store类型
产生getKingdom 和 setKingdom方法， 参数类型是Kingdom的模型类实例。
嵌套加载
在同一个请求中从远端数据源获取层级的关联数据。
绑定
{kingdom.general} {kingdom.general.name}
### 关联中的概念
Roles 角色
角色用于确定关联的生成名字，默认通过字段名（在按键关联中）或是模型名产生。该命名遵循Ext.data.schema.Namer定义的模式。 要更改特定实例，可以显式指定：
自动产生的方法
store
gettter/setter
反身 Reflexive
定义了一方，另一方自动产生

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 7] 关联（Association）

网站导航