EXT.JS6中的model,store,proxy的一些用法

最新推荐文章于 2024-01-13 08:00:00 发布

转载最新推荐文章于 2024-01-13 08:00:00 发布 · 288 阅读

本文介绍了使用ExtJS框架进行数据建模的方法，包括一对一、一对多及多对多关系的定义，以及如何创建和使用数据存储（Store）。通过具体的代码示例展示了不同类型的模型关联和内联数据存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//one-to-one
Ext.define('Address', {
    extend: 'Ext.data.Model',
    fields: [
        'address',
        'city',
        'state',
        'zipcode'
    ]
});

Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'addressId',
        reference: 'Address'
    }]
});

//one-to-many
Ext.define('Department', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'employeeId', reference: 'Employee' }
    ]
});

Ext.define('Division', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'departmentId', reference: 'Department' }
    ]
});


//many-to-many
Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'empId', type: 'int', convert: null },
        { name: 'firstName', type: 'string' },
        { name: 'lastName', type: 'string' }
    ],
    manyToMany: 'Project'
});


Ext.define('Project', {
    extend: 'Ext.data.Model',
    fields: [
        'name'
    ],
    manyToMany: 'Employee'
});

//store
var myStore = Ext.create('Ext.data.Store', {
    model: 'Employee',
    storeId: 'mystore',
    proxy: {
        type: 'rest',
        url: '/employee',
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    },
    autoLoad: true,
    autoSync: true
});

//inline data store

Ext.create('Ext.data.Store', {
    model: 'Employee',
    data: [
        {
            firstName: 'Shiva',
            lastName: 'Kumar',
            gender: 'Male',
            fulltime: true,
            phoneNumber: '123-456-7890'
        },
        {
            firstName: 'Vishwa',
            lastName: 'Anand',
            gender: 'Male',
            fulltime: true,
            phoneNumber: '123-456-7890'
        }
    ]
});

//access the store

Ext.data.StoreManager.lookup('myStore');
Ext.getStore('myStore');
var myStore = this.getViewModel().getStore('myStore')

//store in viewmodel

Ext.define('ToDo.view.toDoList.ToDoListModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.todoList',
    stores: {
        todos: {
            fields: [ { name: 'id', type: 'string' },
                     { name: 'desc', type: 'string' }],
            autoLoad: true,
            sorters: [{
                property: 'done',
                direction: 'ASC'
            }],
            proxy: {
                type: 'rest',
                url: 'tasks',
                reader: {
                    type: 'json',
                },
                writer: {
                    type: 'json'
                }
            }
        }
    }
});