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

简介: //one-to-one Ext.define('Address', { extend: 'Ext.data.Model', fields: [ 'address', 'city', 'state', 'zipcode' ] }); Ext.
//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'
                }
            }
        }
    }
});

 

目录
相关文章
|
30天前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
17 3
|
1月前
|
JavaScript 前端开发
javascript中的switch用法
javascript中的switch用法
|
4月前
|
JavaScript 数据管理
Node.js 文件系统的各种用法和常见场景
Node.js 文件系统的各种用法和常见场景
53 1
|
3月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
49 2
|
1月前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
JavaScript中的`this`关键字根据执行上下文指向不同对象:全局作用域中指向全局对象(如`window`),普通函数中默认指向全局对象,但作为对象方法时指向该对象。在构造函数中,`this`指向新实例。箭头函数不绑定`this`,而是继承上下文的`this`值。可通过`call`、`apply`、`bind`方法显式改变`this`指向。
10 2
|
2月前
|
机器学习/深度学习 JavaScript Python
GEE机器学习——混淆矩阵Classifier.confusionMatrix()和errorMatrix()和exlain()的用法(js和python代码)
GEE机器学习——混淆矩阵Classifier.confusionMatrix()和errorMatrix()和exlain()的用法(js和python代码)
60 0
|
2月前
|
前端开发 JavaScript BI
JavaScript的过滤大师:深度解析Filter用法
JavaScript的过滤大师:深度解析Filter用法
64 0
|
2月前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
35 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
3月前
|
JSON JavaScript 前端开发
深入理解JavaScript对象:从基础到高级用法
深入理解JavaScript对象:从基础到高级用法
63 0
|
3月前
|
缓存 前端开发 JavaScript
理解 Proxy 和 Object.defineProperty:提升你的 JavaScript 技能(下)
理解 Proxy 和 Object.defineProperty:提升你的 JavaScript 技能(下)
理解 Proxy 和 Object.defineProperty:提升你的 JavaScript 技能(下)