ExtJS 数据处理-Associations（关联）

更新记录
2022年7月21日 发布。
2022年7月16日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

Associations(关联)

关联说明

模型(Model)可以与通过关联(Associations)联系在一起
要定义实体之间的关系，支持的关联类型：
一对一(One-to-One)
一对多(One-to-Many)
多对多(Many-to-Many)

定义关联的方法

hasMany 定义一对多关系
hasOne 定义一对一关系
manyToOne 定义多对一关系
manyToMany 定义多对多关系
belongTo 可以用来定义多对一关系
associations 可以用来定义任何关系(已被弃用，不要再使用)

一对一关联(One-to-One Associations)

说明

使用模型类下的字段的reference属性即可

{ name: '字段名称' , reference: '引用的Model名', unique: true }

说明：unique表示唯一，如果不指定则关系为一对多

实例：用户账号 和 员工信息

//一个 用户账号 对应 一个员工信息
//定义用户账号Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    identifier: {
        type: 'uuid'
    },
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'UserName', type: 'string' },
        { name: 'Password', type: 'string' },
        //定义引用外部
        { name: 'UserInfo', reference: 'PandaApp.model.EmployeeInfo', unique: true }
    ]
});
 
//定义员工信息Model
Ext.define('PandaApp.model.EmployeeModel', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    identifier: {
        type: 'uuid'
    },
    fields: [
        { name: 'RealName', type: 'string' },
        { name: 'Age', type: 'int' },
        { name: 'WorkYear', type: 'int' }
    ]
});
 
//定义账号实例(直接内联外键数据)
var userInstance1 = Ext.create('PandaApp.model.User', {
    UserName: 'Panda666',
    Password: '12345678',
    UserInfo: {  //直接定义了对象，也可以引入外部对象
        RealName: 'Panda',
        Age: 666,
        WorkYear: 888
    }
});
//读取数据
console.log(userInstance1.get('UserName'));
console.log(userInstance1.get('Password'));
console.log(userInstance1.get('UserInfo'));

还可以引用外部已经定义好的Model实例

//定义账号实例(关联外部数据)
var employeeInfoInstance = Ext.create('PandaApp.model.EmployeeModel', {
    RealName: 'Panda',
    Age: 666,
    WorkYear: 888
});
var userInstance2 = Ext.create('PandaApp.model.User', {
    UserName: 'Panda666',
    Password: '12345678',
    UserInfo: employeeInfoInstance  //引入外部对象
});
 
//读取数据
console.log(userInstance2.get('UserName'));
console.log(userInstance2.get('Password'));
console.log(userInstance2.get('UserInfo'));

一对多关联(One-To-Many Associations)

说明

使用hasMany配置项

hasMany:[
    {
        model:'对应的Model名称',
        name:'本Model的外键字段',
        associationKey: '关联名称'
    }
]

使用hasMany配置项可以定义关联
使用name配置项可以定义模型的关联外部的字段，可选
如果不定义name配置项，ExtJS将使用模型的名称+s的方式定义默认名称
使用model配置项可以定义关联的模型
使用associationKey定义关联的名称，可选，默认值等于name配置项
注意：如果只有一个外键可以去掉数组符号

使用reference配置项

使用模型类下的字段的reference属性即可

{ name: '字段名称' , reference: '引用的Model名'}

实例：定义老板和员工(一对多)

//定义Boss Model
Ext.define('PandaApp.model.Boss', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ],
    identifier: {  //自动生成id字段的值
        type: 'uuid'  //设置生成uuid
    },
    hasMany: {        //定义一对多关联
        name: 'Employees',                //字段名称
        model:'PandaApp.model.Employee',  //关联的Model
        associationKey: 'Employees'
    }
});
 
//定义 Employee Model
Ext.define('PandaApp.model.Employee', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ],
    identifier: {
        type: 'uuid'
    }
});
 
//定义boss Model实例
var bossInstance = Ext.create('PandaApp.model.Boss', {
    Name: 'Panda666'
});
 
//定义Employee Model实例
var employeeInstance1 = Ext.create('PandaApp.model.Employee', {
    Name: 'Dog'
});
var employeeInstance2 = Ext.create('PandaApp.model.Employee', {
    Name: 'Monkey'
});
 
//将Employee实例添加到boss实例中
bossInstance.Employees().add(employeeInstance1);
bossInstance.Employees().add(employeeInstance2);
 
//读取自身字段
console.log(bossInstance.get('Id'));
console.log(bossInstance.get('Name'));
//读取外部字段
bossInstance.Employees().each(function(record){
    console.log(record.get('Id'));
    console.log(record.get('Name'));
});

实例：用户和城市(一对多)

//定义用户模型
Ext.define('PandaApp.model.User', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'id', type: 'int' },
            { name: 'Name', type: 'string' }
        ]
    ,
    proxy: {
        url: '/user.json',
        type: 'ajax',
        reader: {
            type: 'json'
        }
    },
    hasMany: [ //定义外键的模型
        {
            name: 'Cities',
            model: 'PandaApp.model.City'
        }
    ]
});
 
//定义城市模型
Ext.define('PandaApp.model.City', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'CityName', type: 'string' }
    ],
    idPropery: 'Id',
    proxy: {
        url: '/city.json',
        type: 'ajax',
        reader: {
            type: 'json'
        }
    }
});
 
//模型实例化
var userInstance = Ext.create('PandaApp.model.User');
//加载数据
PandaApp.model.User.load(666,{
    scope: this,
    success: function(record, operation) {
        console.log('success');
        PandaApp.model.City.load(record.get('AddressId'),{
            scope: this,
            success: function(record, operation) {
                console.log(record);
            },
            failure: function(record, operation) {
                console.log('failure');
            },
            callback: function(record, operation, success) {
                console.log('callback');
            }
        });
    },
    failure: function(record, operation) {
        console.log(record);
    },
    callback: function(record, operation, success) {
        console.log('callback');
    }
});

多对对关联(Many-to-Many)

说明

使用Model下的manyToMany配置项即可
注意：在两个Model中都需要添加manyToMany配置项
单个形式：

manyToMany: 'PandaApp.model.ModelName'

多个形式：

manyToMany: [
  'PandaApp.model.ModelName'
],

实例：用户和订单

//定义User模型
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idPropery: 'id',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ],
    manyToMany: [   //定义多对多
        'Order'
    ],
    proxy: {
        url: '/user.json',
        type: 'ajax',
        model: 'PandaApp.model.User',
        reader: {
            type: 'json'
        }
    }
});
 
//定义Order模型
Ext.define('PandaApp.model.Order', {
    extend: 'Ext.data.Model',
    idPropery: 'id',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'orderTitle', type: 'string' }
    ],
    manyToMany: [  //定义多对多
        'User'
    ],
    proxy: {
        url: '/order.json',
        type: 'ajax',
        reader: {
            type: 'json'
        }
    }
});
 
//使用静态方法加载数据
PandaApp.model.User.load(666, {
    success: function(record){
        console.log('success');
        console.log(record.get('id'));  //666
        console.log(record.get('name')); //panda
        //加载对应的order
        record.orders().load(function(){
            console.log(record.orders().count());
        });
    },
    failure: function(record, operation) {
        console.log('failure');
    },
    callback: function(record, operation, success) {
        console.log('callback');
    }
});

实例：学生和课程

// 定义学生Model
Ext.define('Student', {
    extend: 'Ext.data.Model',
    idProperty:'Id',
    fields: [
        { name: 'Id', type: 'int' },
        'firstName',
        'lastName'
    ],
    identifier: {
        type: 'negative'
    },
    manyToMany: 'Course' //关联到课程Model
});
 
//定义课程Model
Ext.define('Course', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        'courseName'
    ],
    identifier: {
        type: 'negative'
    },
    manyToMany: 'Course' //关联到课程Model
});

实例

实例：定义一对一关联

//用户与消息的关联，一个用户对应多个消息
//定义用户Model
Ext.define('MyApp.model.User', {
    extend: 'MyApp.model.Base',
    fields: [{
        name: 'name',
        type: 'string'
    }]
});
 
//定义消息Model
Ext.define('MyApp.model.Message', {
    extend: 'MyApp.model.Base',
    fields: [{
        name: 'userId',
        //定义关联到User
        reference: 'User',
        type: 'int'
    }, {
        name: 'title',
        type: 'string'
    }]
});

实例：一对一，定义模型的关联，并设置实例之间的关联

//人和地址之间，一个人对应一个地址
//定义地址Model
Ext.define('AddressModel',{
    extend: 'Ext.data.Model',
    fields: [
        { name: 'addressId', type: 'int'},
        { name: 'addressDescription', type: 'string'}
    ]
});
 
//定义人Model
Ext.define('PersonModel',{
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name:'name', type: 'string'},
        { name: 'addressId', reference: 'AddressModel'}
    ]
});
 
 
//定义人Model实例
var personData = Ext.create('PersonModel',{
    id: 666,
    name: 'Panda'
});
 
//定义地址Model实例
var addressData = Ext.create('AddressModel',{
    addressId: 888,
    addressDescription: "Panda Work Location"
});
 
//建立关联
personData.address = addressData;
 
if(personData.isValid())
{
    var id = personData.get('id');
    var name = personData.get('name');
    var address = personData.get('addressId');
    console.log(id);
    console.log(name);
    console.log(address);
}
else
{
    console.log('data is not valid');
}

实例：定义一对多关联

//定义部门Model
Ext.define('DepartmentModel', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'departmentId', type: 'int'},
        { name: 'departmentTitle', type: 'string'}
    ]
});
 
//定义公司Model
Ext.define('CompanyModel', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'companyId', type: 'int' },
        { name: 'companyTitle', type: 'string' }
    ],
    hasMany:{
        name: 'department',
        model: 'DepartmentModel'
    }
});

实例：定义多对多关联

//定义员工Model
Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'empId', type: 'int', convert: null },
        { name: 'firstName', type: 'string'},
        { name: 'lastName', type: 'string'}, 
    ],
    //定义多对多
    manyToMany: 'Project'
});
 
//定义项目Model
Ext.define('Project', {
    extend: 'Ext.data.Model',
    fields: [
        'name'
    ],
    //定义多对多
    manyToMany: 'Employee'
});

实例：定义多对多并实例化关联

// 定义学生Model
Ext.define('Student', {
    extend: 'Ext.data.Model',
    idProperty:'Id',
    fields: [
        { name: 'Id', type: 'int' },
        'firstName',
        'lastName'
    ],
    identifier: {
        type: 'negative'
    },
    manyToMany: 'Course' //关联到课程Model
});
 
//定义课程Model
Ext.define('Course', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        'courseName'
    ],
    identifier: {
        type: 'negative'
    }
});
 
//定义课程Model实例1
var course1 = Ext.create('Course', {
    courseName: 'Course1'
});
 
//定义课程Model实例2
var course2 = Ext.create('Course', {
    courseName: 'Course2'
});
 
//定义课程Model实例3
var course3 = Ext.create('Course', {
    courseName: 'Course3'
});
//定义课程Model实例4
var course4 = Ext.create('Course', {
    courseName: 'Course4'
});
 
var course5 = Ext.create('Course', {
    courseName: 'Course5'
});
 
//定义学生Model实例1
var studentRecord = Ext.create('Student',{
    firstName:'steve',
    lastName: 'Jobs'
});
 
//定义学生Model实例2
var student1 = Ext.create('Student', {
    firstName: 'Bob',
    lastName: 'Friss'
});
 
//定义学生Model实例3
var student2 = Ext.create('Student', {
    firstName: 'James',
    lastName: 'Bond'
});
 
//定义学生Model实例4
var student3 = Ext.create('Student', {
    firstName: 'Sachin',
    lastName: 'Tendulkar'
});
 
//学生添加课程
student1.courses().add(course1);
student1.courses().add(course2);
 
//课程添加学生
course3.students().add(student2);
course3.students().add(student3);

实例：使用关联Model

MyApp.model.User.load(1, {
    callback: function(user) {
        console.log('User: ' + user.get('name'));
 
        user.posts(function(posts){
            posts.each(function(post) {
                console.log('Post: ' + post.get('title'));
            });
        });
    }
});