`

EXT.data.Store用法详解

阅读更多

一:简单的store-SimpleStore

    使用实例:

     

var data = [
              ['value1','text1'],
              ['value2','text2']
          ];
var store = new Ext.data.SimpleStore({
        fileds:['value','text'],
        data:data   
});

 SimpleStore为在本地创建数据的简单获取数据集,fileds属性是定义获取数据的列名称,data则是获取本地数据集合,然后SimpleStore对其进行封装。

 

一:复杂的store-JsonStore

     例如:

//定义store
var chartStore = new Ext.data.JsonStore({
      root:'data',
      fields:[
        {
          name:'label',
          mapping:'endTime',
          convert:function(v,record){
            return Date.parseDate(v, 'Y-m-d H:i:s').format('H:i');
          }
        },
        {name:'startTime',type:'date',dateFormat:'Y-m-d H:i:s'},
        {name:'endTime',type:'date',dateFormat:'Y-m-d H:i:s'},
        {name:'alarmCount',type:'int'},
        {name:'eventCount',type:'int'}
      ],
      sortInfo:{field: 'startTime', direction: 'ASC'}
    });

//测试数据
var obj={
        startTime:'2009-06-22 01:00:00',
        endTime:'2009-06-23 01:00:00',
        interval:60,
        data:[
          {startTime:'2009-06-22 01:00:00',endTime:'2009-06-22 02:00:00',alarmCount:02,eventCount:15},
          {startTime:'2009-06-22 02:00:00',endTime:'2009-06-22 03:00:00',alarmCount:03,eventCount:0},
          {startTime:'2009-06-22 03:00:00',endTime:'2009-06-22 04:00:00',alarmCount:04,eventCount:15},
          {startTime:'2009-06-22 04:00:00',endTime:'2009-06-22 05:00:00',alarmCount:15,eventCount:25},
          {startTime:'2009-06-22 05:00:00',endTime:'2009-06-22 06:00:00',alarmCount:06,eventCount:15},
          {startTime:'2009-06-22 06:00:00',endTime:'2009-06-22 07:00:00',alarmCount:0,eventCount:20},
          {startTime:'2009-06-22 07:00:00',endTime:'2009-06-22 08:00:00',alarmCount:0,eventCount:0},
          {startTime:'2009-06-22 08:00:00',endTime:'2009-06-22 09:00:00',alarmCount:09,eventCount:15},
          {startTime:'2009-06-22 09:00:00',endTime:'2009-06-22 10:00:00',alarmCount:10,eventCount:15},
          {startTime:'2009-06-22 10:00:00',endTime:'2009-06-22 11:00:00',alarmCount:11,eventCount:25},
          {startTime:'2009-06-22 11:00:00',endTime:'2009-06-22 12:00:00',alarmCount:12,eventCount:75},
          {startTime:'2009-06-22 12:00:00',endTime:'2009-06-22 13:00:00',alarmCount:13,eventCount:12},
          {startTime:'2009-06-22 13:00:00',endTime:'2009-06-22 14:00:00',alarmCount:14,eventCount:10},
          {startTime:'2009-06-22 14:00:00',endTime:'2009-06-22 15:00:00',alarmCount:45,eventCount:60},
          {startTime:'2009-06-22 15:00:00',endTime:'2009-06-22 16:00:00',alarmCount:16,eventCount:25},
          {startTime:'2009-06-22 16:00:00',endTime:'2009-06-22 17:00:00',alarmCount:17,eventCount:8},
          {startTime:'2009-06-22 17:00:00',endTime:'2009-06-22 18:00:00',alarmCount:18,eventCount:47},
          {startTime:'2009-06-22 18:00:00',endTime:'2009-06-22 19:00:00',alarmCount:29,eventCount:35},
          {startTime:'2009-06-22 19:00:00',endTime:'2009-06-22 20:00:00',alarmCount:20,eventCount:15},
          {startTime:'2009-06-22 20:00:00',endTime:'2009-06-22 21:00:00',alarmCount:21,eventCount:10},
          {startTime:'2009-06-22 21:00:00',endTime:'2009-06-22 22:00:00',alarmCount:22,eventCount:5},
          {startTime:'2009-06-22 22:00:00',endTime:'2009-06-22 23:00:00',alarmCount:53,eventCount:15},
          {startTime:'2009-06-22 23:00:00',endTime:'2009-06-23 00:00:00',alarmCount:24,eventCount:33},
          {startTime:'2009-06-23 00:00:00',endTime:'2009-06-23 01:00:00',alarmCount:11,eventCount:0}
        ]
      }

//载入数据
chartStore.loadData(obj);

属性: 

root:获该属性是指包含所有行对象的数组,此处为obj中的data。

  fields:就是一个Record构造器,我们可以通过fields获取需要的字段,并对每个字段进行格式定义、转换等方法。['','',{},{}].

     1.定义列名称:简单写法为fields:['startTime']映射了Record的'startTime'字段为行对象的同名键名称。复杂点写法就是{name:'startTime'}

     2.映射:{name:'label',mapping:'endTime'}映射了'label'字段为行对象的'endTime'键。

     3.convert:默认的是function(v,record){}这个写法,是对数据中的这个字段进行格式转换。

     4.可对每个字段定义类型Type和格式定义。
  URL:指向外部的页面获取数据,需要接受回来的是jsonstore,创建一个    HttpProxy对象。

  sortInfo:如何排序的对象,格式如下:{field: "fieldName", direction: "ASC|DESC"}

方法:

load:

    采用配置好的Reader格式去加载Record缓存,store.load();

loadData:从传入的数据块中装载数据,并触发load事件.chartStore.loadData(obj);

 

 

分享到:
评论

相关推荐

    Ext.data.Store的基本用法

    ### Ext.data.Store的基本用法详解 #### 一、Ext.data.Store简介 `Ext.data.Store`是ExtJS框架中用于管理数据的核心组件之一。它主要负责数据的存储、加载、更新等操作,并且提供了多种方法来方便地处理这些数据。...

    Ext.data专题

    ### Ext.data专题详解 #### 一、Ext.data概述 **Ext.data** 是一个重要的JavaScript库组件,用于处理数据传输和管理。它定义了一系列的核心概念,包括 **Store**、**Reader** 和 **Proxy**,这些都是Ext.data的...

    EXT核心API详解

    35、Ext.data.Store类 …………………… 28 36、Ext.data.GroupingStore类 ………… 32 37、Ext.data.SimpleStore类 ………… 34 38、Ext.data.Tree类 …………………… 34 39、Ext.data.Node类 ………………… 34 ...

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    ### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...

    Ext.grid.GridPanel属性祥解

    5. **reconfigure(Ext.data.Store store, Ext.grid.ColumnModel colModel)** - 说明:使用新的数据集和列模型重新配置表格。 - 示例:`reconfigure(new Ext.data.JsonStore(...), new Ext.grid.ColumnModel([...])...

    EXT核心API详解.doc

    EXT核心API详解主要涵盖了一系列与EXT.js库相关的类和对象,EXT.js是一个强大的JavaScript UI框架,用于构建富客户端Web应用程序。以下是对各个类的详细解释: 1. **Ext类**:EXT库的基础类,提供了许多实用的方法...

    extjs帮助文档

    - `Ext.data.ScriptTagProxy.save(store, operation, successCallback, failureCallback)`:保存数据。 #### 三十一、Ext.data.DataReader类(第26页) - **概述**:Ext.data.DataReader类用于解析原始数据并将其...

    ext表格布局小例子

    ### ExtJS 表格布局小例子详解 #### 一、简介 本文档旨在解析一个具体的 ExtJS 表格布局小例子,重点介绍其中涉及的数据存储、数据删除与添加...希望本文档能够帮助开发者更好地理解和掌握 ExtJS 表格组件的使用方法。

    extjs帮助文档pdf版

    - `Ext.data.Store.load(params, callback, scope)`: 加载数据。 - `Ext.data.Store.add(record)`: 添加数据记录。 - `Ext.data.Store.remove(record)`: 移除数据记录。 #### 36. Ext.data.GroupingStore 类 (P....

    Ext_Js分页显示案例详解

    在Ext_Js中,主要依赖于`Ext.data.Store`对象来管理数据,以及`Ext.grid.Panel`或`Ext.dataview.DataView`等控件来展示这些数据。分页可以通过`Ext.PagingToolbar`组件实现。 1. **Store对象**:Store是Ext_Js中用...

    extjs核心api详解

    这一系列章节详细介绍了如何使用Ext.data.Connection、Ext.data.Ajax进行异步数据请求,如何使用Ext.data.Record、Ext.data.DataProxy、Ext.data.DataReader和Ext.data.Store来管理和操作数据。 七、Ext.widgets...

    ExtJS ToolTip功能

    var store = Ext.create('Ext.data.ArrayStore',{ fields:['company','price','change'], data:[ ['3mCo',71.72,0.02], ... ] }); ``` 创建了一个数组类型的存储器(`ArrayStore`),用于存储公司的名称、...

    extjs数据存储与传输详解

    **Ext.data.Connection**是对**Ext.lib.Ajax**的一个封装,它简化了使用Ajax的方式,使开发人员能够更加便捷地进行前后端数据交互。**Ext.data.Connection**的主要作用是在Ext.data.HttpProxy和Ext.data....

    Ext2 核心 API 中文详解

    tx.data.ListStore = Ext.extend(Ext.data.Store, { constructor: function() { // superclass call tx.data.ListStore.superclass.constructor.call(this, { sortInfo: { field: 'listName', direction: "ASC...

    extjs4 对各类型store各种数据的读取 model 前台 等等

    - 使用不同的Store类型来管理不同类型的数据源; - 通过多种方式将数据绑定到界面上; - 定义详细的Model结构,包括字段类型和验证规则; - 正确实例化Model对象并利用其进行数据操作。 以上就是基于给定文件信息对...

    精通JS脚本之ExtJS框架.part1.rar

    6.3 元素常见的使用方法 6.3.1 常见的“显示/隐藏”方法 6.3.2 常见的“内容控制”方法 6.3.3 常见的“操控DOM”方法 6.3.4 常见的“尺寸大小/定位”方法 6.3.5 常见的“特效动画”方法 6.3.6 DomHelper简介 ...

Global site tag (gtag.js) - Google Analytics