一:简单的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`是ExtJS框架中用于管理数据的核心组件之一。它主要负责数据的存储、加载、更新等操作,并且提供了多种方法来方便地处理这些数据。...
### Ext.data专题详解 #### 一、Ext.data概述 **Ext.data** 是一个重要的JavaScript库组件,用于处理数据传输和管理。它定义了一系列的核心概念,包括 **Store**、**Reader** 和 **Proxy**,这些都是Ext.data的...
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` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...
5. **reconfigure(Ext.data.Store store, Ext.grid.ColumnModel colModel)** - 说明:使用新的数据集和列模型重新配置表格。 - 示例:`reconfigure(new Ext.data.JsonStore(...), new Ext.grid.ColumnModel([...])...
EXT核心API详解主要涵盖了一系列与EXT.js库相关的类和对象,EXT.js是一个强大的JavaScript UI框架,用于构建富客户端Web应用程序。以下是对各个类的详细解释: 1. **Ext类**:EXT库的基础类,提供了许多实用的方法...
- `Ext.data.ScriptTagProxy.save(store, operation, successCallback, failureCallback)`:保存数据。 #### 三十一、Ext.data.DataReader类(第26页) - **概述**:Ext.data.DataReader类用于解析原始数据并将其...
### ExtJS 表格布局小例子详解 #### 一、简介 本文档旨在解析一个具体的 ExtJS 表格布局小例子,重点介绍其中涉及的数据存储、数据删除与添加...希望本文档能够帮助开发者更好地理解和掌握 ExtJS 表格组件的使用方法。
- `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.data.Store`对象来管理数据,以及`Ext.grid.Panel`或`Ext.dataview.DataView`等控件来展示这些数据。分页可以通过`Ext.PagingToolbar`组件实现。 1. **Store对象**:Store是Ext_Js中用...
这一系列章节详细介绍了如何使用Ext.data.Connection、Ext.data.Ajax进行异步数据请求,如何使用Ext.data.Record、Ext.data.DataProxy、Ext.data.DataReader和Ext.data.Store来管理和操作数据。 七、Ext.widgets...
var store = Ext.create('Ext.data.ArrayStore',{ fields:['company','price','change'], data:[ ['3mCo',71.72,0.02], ... ] }); ``` 创建了一个数组类型的存储器(`ArrayStore`),用于存储公司的名称、...
**Ext.data.Connection**是对**Ext.lib.Ajax**的一个封装,它简化了使用Ajax的方式,使开发人员能够更加便捷地进行前后端数据交互。**Ext.data.Connection**的主要作用是在Ext.data.HttpProxy和Ext.data....
tx.data.ListStore = Ext.extend(Ext.data.Store, { constructor: function() { // superclass call tx.data.ListStore.superclass.constructor.call(this, { sortInfo: { field: 'listName', direction: "ASC...
- 使用不同的Store类型来管理不同类型的数据源; - 通过多种方式将数据绑定到界面上; - 定义详细的Model结构,包括字段类型和验证规则; - 正确实例化Model对象并利用其进行数据操作。 以上就是基于给定文件信息对...
6.3 元素常见的使用方法 6.3.1 常见的“显示/隐藏”方法 6.3.2 常见的“内容控制”方法 6.3.3 常见的“操控DOM”方法 6.3.4 常见的“尺寸大小/定位”方法 6.3.5 常见的“特效动画”方法 6.3.6 DomHelper简介 ...