ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ExtJS 数据处理-Associations(关联)

2022-07-21 08:36:33  阅读:210  来源: 互联网

标签:Associations model name Ext 数据处理 Model type ExtJS 定义


更新记录
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'));
            });
        });
    }
});

标签:Associations,model,name,Ext,数据处理,Model,type,ExtJS,定义
来源: https://www.cnblogs.com/cqpanda/p/16483299.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有