`

【读】Ext.data.JsonStore

阅读更多
简单的JSONSTORE
var data = [
    ['1','name1','descn1'],
    ['2','name2','descn2'],
    ['3','name3','descn3'],
    ['4','name4','descn4'],
    ['5','name5','descn5']
];//二维数组
var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
     reader: new Ext.data.ArrayReader({}, [         {name: 'id'},         {name: 'name'},         {name: 'descn'}     ])
});
ds.load();     //标准 可以作为静态数据来模拟动态的例子。

ds要对应两个部分:proxy和reader。proxy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。
现在我们用的是Ext.data.MemoryProxy,它是专门用来解析js变量的。你可以看到,我们直接把data作为参数传递进去了。
Ext.data.ArrayReader专门用来解析数组,并且告诉我们它会按照定义的规范进行解析,每行读取三个数据,第一个叫id,第二个叫 name,第三个descn。是不是有些眼熟,翻到前面cm定义的地方,哦,原来跟dataIndex是对应的。这样cm就知道哪列应该显示那条数据了。唉,你要是能看明白这一点,那你实在是太聪明了。
记得要执行一次ds.load(),对数据进行初始化。
有兄弟可能要问了,要是我第一列数据不是id而是name,第二列数据不是name而是id咋办?嗯,嗯,这个使用就用mapping来解决。改改变成这样:
var ds = new Ext.data.Store({
 proxy: new Ext.data.MemoryProxy(data), //HttpProxy
 reader: new Ext.data.ArrayReader({}, [
 {name: 'id', mapping: 1},
 {name: 'name', mapping: 0},
 {name: 'descn', mapping: 2}
 ])
});
----------------------------------------------------------------------------------
复杂一点的JSONSTORE
var resourcestore = new Ext.data.JsonStore({
root:'',
id:'resourceid',
remoteSort: false,
  pruneModifiedRecords:true,//设置为true,则每次当store装载或有record被移除时,清空所有修改了的record信息. 默认为false.
fields: [ //两对键值对这是name
  'resourceid',
   {name:'contentno',mapping:'content.contentno'},
  ],
 proxy: new Ext.data.HttpProxy({
 url: 'operation/resource/manageresource.jsp'//相对路径
})
});
----------------------------------------------------------------------------------
load事件
store.on('load',function(store,records,o){
Ext.Ajax.request({
 url : "operation/task/querytimedeveloperstatustasklist.jsp?developerid="+finishtask_store.baseParams.developerid+"&starttime="+finishtask_store.baseParams.starttime+"&endtime="+finishtask_store.baseParams.endtime,
method : 'post',
success : function(response, options) {
 var results = Ext.util.JSON.decode(response.responseText);
 alert(results.totalworkload);//取数据 { totalworkload : 2000}
results.tasklist[0].taskid // tasklist :[ {taskid: 1,.....},{taskid:2,.....}.....] 大概就是获取第一条数据的taskid的值。
},
 failure : function() { result = false;
 }
});}
//从JSONSTORE中取数据方法:
store.reader.jsonData['totalworkload'] //马上测试之。。。恍然大悟。
分享到:
评论

相关推荐

    ExtJs学习资料28-Ext.data.JsonStore数据存储器.doc

    var store = new Ext.data.JsonStore({ url: 'jsonDataPerson.asp', root: 'rows', fields: ['name', 'age', 'sex'] }); store.load(); grid.store = store; ``` 这里创建了一个JsonStore,指定数据来源URL和...

    Ext.Store的获取方法

    var store = new Ext.data.JsonStore({ // store configurations }); store.load(); ``` 然后通过`store`变量来访问和操作Store。但在使用`extend`进行类继承时,可能会将Store的定义放在一个新的组件内,例如一个...

    Ext.grid.GridPanel属性祥解

    - 示例:`store: new Ext.data.JsonStore({ ... })` 2. **columns** - 说明:`columns`是一个数组,用来配置表格的列。每一项都是一个`Ext.grid.Column`实例。 - 示例:`columns: [{ header: '姓名', dataIndex:...

    extjs 前后台交互参数出现中文乱码问题的解决方法

    var CustomFormName = Ext.MessageBox.prompt('提示', '请输入:', function (btn, CustomFormName) { if (btn === "ok") { alert('原始值: ' + CustomFormName); // 使用encodeURI()函数对中文字符进行第一次...

    ext 基本知识-store-proxy-reader-ext-connection-实例

    在描述中的`var ds = Ext.data.JsonStore({url: 'xxx.jsp',root: 'root',fields: ['id','name','descn']});`中,创建了一个JsonStore实例,ds,用于从'xxx.jsp'获取JSON格式的数据。JsonStore是Store的一种特殊类型...

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

    var user = Ext.ModelMgr.create({ name: 'tom', age: 24, gender: '男', username: 'abc@example.com' }, 'User'); ``` 这里创建了一个User类型的对象,并赋值给变量`user`。 ### 小结 通过上述内容我们可以...

    ext3.*画图的例子

    如果数据需要从后台获取,我们可以使用`Ext.data.JsonStore`或`Ext.data.Store`与`Ext.Ajax.request`结合。例如: ```javascript Ext.Ajax.request({ url: 'getData.php', // 后台数据接口 success: function...

    Ext_Js分页显示案例详解

    var store = new Ext.data.JsonStore({ url: 'display.action', root: 'results', id: 'id', fields: ['id', 'title', 'detail'] }); var grid = new Ext.grid.GridPanel({ store: store, columns: [ {...

    Ext与后台数据库交互

    该模块下包括了多个子类,例如`Ext.data.Store`、`Ext.data.DataProxy`以及`Ext.data.DataReader`等,这些子类共同协作完成数据的加载、解析和管理等功能。 ##### 1.2 Ext.data.Store `Ext.data.Store`是Ext框架中...

    ExtDesigner中用jsonstore给girdpanel绑定数据

    var store = Ext.create('Ext.data.JsonStore', { fields: ['field1', 'field2'], // 定义数据字段 proxy: { type: 'ajax', url: 'data.json', // 数据来源 reader: { type: 'json', root: 'data' // JSON...

    多年积攒下来的EXT3.3例子大放送

    例如,`Ext.data.JsonStore`可以用来加载JSON格式的后台数据,而`Ext.data.HttpProxy`则负责发起HTTP请求。开发者可能在示例中看到如何配置这些对象以实现数据的获取和更新。 3. **报表**:EXTJS提供了创建复杂报表...

    extjs学习资源

    - **数据管理**: `Ext.data`是Extjs中用于处理数据的核心模块。 - **连接**: `Ext.data.Connection`和`Ext.data.Ajax`用于发起HTTP请求获取数据。 - **记录模型**: `Ext.data.Record`定义了数据模型的结构。 - **...

    EXT3.2 多选下拉框

    var store = new Ext.data.JsonStore({ fields: ['id', 'text'], data: [ { id: 1, text: 'Option 1' }, { id: 2, text: 'Option 2' }, // 更多选项... ] }); var multiSelectComboBox = new Ext.form....

    ext TreeGrid分页可编辑

    me.treeStore2 = Ext.create('Ext.data.JsonStore', { autoLoad: true, pageSize: itemsPerPage, proxy: { type: 'ajax', url: YZSoft.$url('YZSoft.Services.REST/BPM/Process.ashx'), extraParams: { ...

    ExtJS 3.2的中文参考手册

    创建表格的基本步骤包括定义数据模型、列模型等,例如:`var store = new Ext.data.JsonStore({ url: 'data.json', root: 'rows', id: 'id', fields: ['id', 'name', 'email'] });`。 - **更多组件**: ExtJS还提供...

    ext grid网格控件实例

    3. **JSON数据源**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,EXT Grid通过`Ext.data.JsonStore`处理JSON数据。配置时需提供`url`和`root`属性,`root`定义了JSON对象中包含数据的键。JSON的...

    extjs表格、树控件

    var store = new Ext.data.JsonStore({ url: 'data.json', root: 'rows', id: 'id', fields: ['id', 'name', 'organization', 'homepage'], proxy: new Ext.data.HttpProxy({ type: 'GET', url: 'data.json' ...

    extjs tree 节点 链接 新窗口

    var store = new Ext.data.JsonStore({ url: 'link.ejf', totalProperty: 'results', root: 'rows', idProperty: 'id', fields: ['title', 'username', {name: 'loginTimes', type: 'int'}, {name: '...

    ext js介绍

    var store = Ext.create('Ext.data.JsonStore', { fields: ['name', 'email'], proxy: { type: 'ajax', url: 'data.json', reader: { type: 'json', rootProperty: 'data' } } }); var grid = Ext....

Global site tag (gtag.js) - Google Analytics