Ext.js 教程:数据

数据包用于加载和保存应用程序中的所有数据。

数据包有许多类,但最重要的类是:

  1. 模态
  2. 商店
  3. 代理 

模型

modal的基类是Ext.data.Model.It表示应用程序中的一个实体。 它将存储数据绑定到视图。 它有后端数据对象到视图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。 它包含本地缓存的数据,该数据将在模型对象的帮助下在视图上呈现。 存储使用代理获取数据,代理具有为服务定义的路径以获取后端数据。

存储数据可以从静态或动态两种方式获取。

静态存储

对于静态存储,我们将存储在存储中的所有数据如下:

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。 代理由模型和商店用于处理模型数据的加载和保存。

有两种类型的代理:

  1. 客户端代理
  2. 服务器代理

客户端代理

客户端代理包括使用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
       },
    }
 });

作者:唐伯虎点蚊香,如若转载,请注明出处:https://www.web176.com/extjs/11514.html

(0)
打赏 支付宝 支付宝 微信 微信
唐伯虎点蚊香的头像唐伯虎点蚊香
上一篇 2023年3月2日
下一篇 2023年3月2日

相关推荐

发表回复

登录后才能评论