- Ext.js 教程
- Ext.js - 主页
- Ext.js - 概述
- Ext.js - 环境设置
- Ext.js - 命名约定
- Ext.js - 架构
- Ext.js - 第一个程序
- Ext.js - 类系统
- Ext.js - 容器
- Ext.js - 布局
- Ext.js - 组件
- Ext.js - 拖放
- Ext.js - 主题
- Ext.js - 自定义事件和监听器
- Ext.js - 数据
- Ext.js - 字体
- Ext.js - 风格
- Ext.js - 绘图
- Ext.js - 本地化
- Ext.js - 辅助功能
- Ext.js - 调试代码
- Ext.js - 方法
- Ext.js 有用资源
- Ext.js - 问题与解答
- Ext.js - 快速指南
- Ext.js - 有用的资源
- Ext.js - 讨论
Ext.js - 数据
数据包用于加载和保存应用程序中的所有数据。
数据包有许多类,但最重要的类是 -
- 模型
- 店铺
- 代理人
模型
模型的基类是Ext.data.Model。它代表应用程序中的一个实体。它将商店数据绑定到视图上。它具有后端数据对象到视图 dataIndex 的映射。数据是在 store 的帮助下获取的。
创建模型
为了创建模型,我们需要扩展 Ext.data.Model 类,并且需要定义字段、字段名称和映射。
Ext.define('StudentDataModel', { extend: 'Ext.data.Model', fields: [ {name: 'name', mapping : 'name'}, {name: 'age', mapping : 'age'}, {name: 'marks', mapping : 'marks'} ] });
在这里,名称应该与我们在视图中声明的 dataIndex 相同,并且映射应该与数据库中的数据(静态或动态数据)匹配,该数据将使用 store 获取。
店铺
store 的基类是Ext.data.Store。它包含本地缓存的数据,这些数据将在模型对象的帮助下呈现在视图上。Store 使用代理来获取数据,代理为服务定义了获取后端数据的路径。
可以通过两种方式获取存储数据 - 静态或动态。
静态存储
对于静态存储,我们将拥有存储中存在的所有数据,如以下代码所示。
Ext.create('Ext.data.Store', { model: 'StudentDataModel', data: [ { name : "Asha", age : "16", marks : "90" }, { name : "Vinit", age : "18", marks : "95" }, { name : "Anand", age : "20", marks : "68" }, { name : "Niharika", age : "21", marks : "86" }, { name : "Manali", age : "22", marks : "57" } ]; });
动态商店
可以使用代理获取动态数据。我们可以拥有可以从 Ajax、Rest 和 Json 获取数据的代理。
代理人
代理的基类是Ext.data.proxy.Proxy。模型和存储使用代理来处理模型数据的加载和保存。
有两种类型的代理
- 客户端代理
- 服务器代理
客户端代理
客户端代理包括使用 HTML5 本地存储的内存和本地存储。
服务器代理
服务器代理使用 Ajax、Json 数据和 Rest 服务处理来自远程服务器的数据。
在服务器中定义代理
Ext.create('Ext.data.Store', { model: 'StudentDataModel', proxy : { type : 'rest', actionMethods : { read : 'POST' // Get or Post type based on requirement }, url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path // which fetches data from database or Json file path where the data is stored reader: { type : 'json', // the type of data which is fetched is of JSON type root : 'data' }, } });