526互联

ExtJS-Data Package (数据处理包) - Model间关系

发布时间 2023-04-04 20:47:27作者: 重庆熊猫

更新记录
2023年3月9日 发布。

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

官方文档：https://docs.sencha.com/extjs/7.6.0/classic/Ext.data.schema.Association.html

说明

在ExtJS中，可以设置模型与模型之间的关系，如一对多、多对一或一对一关系。
定义Model关系的方式：
1、使用hasMany/hasOne/belongsTo配置项即可。比如：

hasMany: { model: 'xx', name: ''},
hasOne: { model: 'xx', name: ''},
belongsTo: '',

2、除了使用直接配置项，还可以使用associations配置项，比如：

associations: {type: 'hasOne', model: 'xxx', name: ''}

一对多

说明

使用hashMany配置项即可。

实例：一个用户有多个文章数据

Ext.define('User',{
    extend: 'Ext.data.Model',
    field: [ 'id' ],
    hasMany: [
        //在用户模型与文章模型之间建立一对多的关联关系
        { model: 'Article', name: 'articles' },
    ]
});

Ext.define('Article',{
    extend: 'Ext.data.Model',
    field: [ 'id' ],
    //文章对应属于一个用户
    belongsTo: 'User',
});

实例：一个用户有多条评论数据

Ext.define('User',{
    extend: 'Ext.data.Model',
    field: [ 'id' ],
    hasMany: [
        //在用户模型与评论模型之间建立一对多的关联关系
        {model: 'Comment', name: 'comments' }
    ]
});

实例： 一篇文章有多条评论数据

Ext.define('Article',{
    extend: 'Ext.data.Model',
    field: [ 'id' ],
    //在文章模型与评论模型之间建立一对多的关联关系
    hasMany: { model: 'Comment', name: 'comments' }
});


Ext.define('Comment',{
    extend: 'Ext.data.Model',
    field: [ 'id' ],
    //评论属于文章
    belongsTo: 'Article',
});

(待优化)实例：模型实例化(一对一关联,One-to-one associations)

//被引用的Model
Ext.define('Myapp.model.Contract',{
    extend:'Ext.data.Model',
    idProperty:'id ',
    fields: [
        {name: 'id', type: 'int' },
        {name: 'contractId', type: 'string'},
        {name: 'documentType', type: 'string'}
    ]
});

//引用其他Model的Model
Ext.define('Myapp.model.Customer',{
    extend:'Ext.data.Model',
    requires: [ 'Myapp.model.Contract'],
    idProperty:'id ',fields:[
        {name: 'id', type: 'int'},
        {name: 'name'    , type: 'string'},
        {name: 'phone'   , type: 'string'},
        {name: 'website' , type: 'string'},
        {name: 'status'  , type: 'string'},
        {name: 'clientSince' , type: 'date', dateFormat: 'Y-m-d H:i'},
        {name: 'contractInfo' , reference: 'Contract', unique:true}
   ]
});

//创建Model实例
let myclient = Ext.create('Myapp.model.Customer',{
    id: 10001,
    name: 'Acme corp',
    phone: '+52-01-55-4444-3210',
    website: 'www.acmecorp.com',
    status: 'Active',
    clientSince: '2010-01-01 14:35',
    //为引用的Model赋值
    contractInfo:{
        id:444,
        contractId:'ct-001-444',
        documentType:'PDF'
    }
});

(待优化)实例：模型实例化(一对一关联,One-to-one associations)

//被引用的Model
Ext.define('Myapp.model.Contract',{
    extend:'Ext.data.Model',
    idProperty:'id ',
    fields: [
        {name: 'id', type: 'int' },
        {name: 'contractId', type: 'string'},
        {name: 'documentType', type: 'string'}
    ]
});

//引用其他Model的Model
Ext.define('Myapp.model.Customer',{
    extend:'Ext.data.Model',
    requires: [ 'Myapp.model.Contract'],
    idProperty:'id ',fields:[
        {name: 'id', type: 'int'},
        {name: 'name'    , type: 'string'},
        {name: 'phone'   , type: 'string'},
        {name: 'website' , type: 'string'},
        {name: 'status'  , type: 'string'},
        {name: 'clientSince' , type: 'date', dateFormat: 'Y-m-d H:i'},
        {name: 'contractInfo' , reference: 'Contract', unique:true}
   ]
});

//创建Model实例
let myclient = Ext.create('Myapp.model.Customer',{
    id: 10001,
    name: 'Acme corp',
    phone: '+52-01-55-4444-3210',
    website: 'www.acmecorp.com',
    status: 'Active',
    clientSince: '2010-01-01 14:35',
    //为引用的Model赋值
    contractInfo:{
        id:444,
        contractId:'ct-001-444',
        documentType:'PDF'
    }
});

(待优化) 实例：一对多关联（One-to-many associations）

Ext.define('Myapp.model.Client',{
    extend:'Ext.data.Model',
    //加载依赖的Model
    requires: ['Myapp.model.Employee'],
    idProperty:'id ',
    fields:[....  ],
    //配置一对多
    hasMany:{
        model:'Myapp.model.Employee',
        name:'employees',
        associationKey: 'employees'
    }
});

//被引用的Model
Ext.define('Myapp.model.Employee',{
    extend:'Ext.data.Model',
    idProperty:'id',
    fields:[
        {name: 'id', type: 'int' },
        {name: 'clientid'  , type: 'int'},
        {name: 'name'      , type: 'string'},
        {name: 'phone'     , type: 'string'},
        {name: 'email'     , type: 'string'},
        {name: 'gender'    , type: 'string'}
    ]
});


//model实例化
let myclient = Ext.create('Myapp.model.ClientWithContacts',{
    id: 10001,
    name: 'Acme corp',
    phone: '+52-01-55-4444-3210',
    website: 'www.acmecorp.com',
    status: 'Active',
    clientSince: '2010-01-01 14:35'
});

//给Model引用的Model添加数据
myclient.employees().add(
    {
        id:101,
        clientId:10001,
        name:'Juan Perez',
        phone:'+52-05-2222-333',
        email:'juan@test.com',
        gender:'male'
    },
    {
        id:102,
        clientId:10001,
        name:'Sonia Sanchez',
        phone:'+52-05-1111-444',
        email:'sonia@test.com',
        gender:'female'
    }
);

//遍历读取被引用的Model
myclient.employees().each(function(record){  
    console.log(record.get('name') + ' - ' + record.get('email') );
});