`

Ext.data.xxxStore 数据解析的简单运用

阅读更多

 

做任何的应用程序都少不了对数据的操作。在Extjs里面对数据的解析主要由是Ext.data.Store来做。今天接触了Ext.data.ArrayStore Ext.data.JsonStore. 从命名上就知道它们所解析的格式是不同的。所以当我们需要哪种格式来填充我们的组件的时候,我们可以让设计后台传过来的格式,符合我们解析就格式就OK了。看下API中的例子便可一目了然。

Code:
  1. 一个store配置项看起来如下:
  2. varstore=newExt.data.JsonStore({
  3. //storeconfigs
  4. autoDestroy:true,
  5. url:'get-images.php',
  6. storeId:'myStore',
  7. //readerconfigs
  8. root:'images',
  9. idProperty:'name',
  10. fields:['name','url',{name:'size',type:'float'},{name:'lastmod',type:'date'}]
  11. });
  12. 此store被配置用来解析如下的格式的对象:
  13. {
  14. images:[
  15. {name:'Imageone',url:'/GetImage.php?id=1',size:46.5,lastmod:newDate(2007,10,29)},
  16. {name:'ImageTwo',url:'/GetImage.php?id=2',size:43.2,lastmod:newDate(2007,10,30)}
  17. ]
  18. }
  19. 一个符合此格式的字符串也可以用作data配置项。
Code:
  1. Store的配置就像如下代码所示:
  2. varstore=newExt.data.ArrayStore({
  3. //storeconfigs
  4. autoDestroy:true,
  5. storeId:'myStore',
  6. //readerconfigs
  7. idIndex:0,
  8. fields:[
  9. 'company',
  10. {name:'price',type:'float'},
  11. {name:'change',type:'float'},
  12. {name:'pctChange',type:'float'},
  13. {name:'lastChange',type:'date',dateFormat:'n/jh:ia'}
  14. ]
  15. });
  16. 此Store被配置用来解析如下格式的对象:
  17. varmyData=[
  18. ['3mCo',71.72,0.02,0.03,'9/112:00am'],
  19. ['AlcoaInc',29.01,0.42,1.47,'9/112:00am'],
  20. ['BoeingCo.',75.43,0.53,0.71,'9/112:00am'],
  21. ['Hewlett-PackardCo.',36.53,-0.03,-0.08,'9/112:00am'],
  22. ['Wal-MartStores,Inc.',45.45,0.73,1.63,'9/112:00am']
  23. ];
  24. 一个符合此格式的字符串也可以用作data配置项。

 

很显然,JsonStore解析的是键值对,而ArrayStore解析的是数组。两者完全不同。

 

官网的例子中,大多数在控件渲染时,JsonStore就自动加载从后台传过来的数据填充。而且在JsonStore里面获取数据出来给当前控件渲染时,是获取不出来的。如有以下的需求时:

Code:
  1. var xxxCom=function(params,cfg){ //定义组件xxxCom
  2. xxxCom.apply(this,cfg);
分享到:
评论

相关推荐

    Ext.data.Store的基本用法

    `reader`则使用了`Ext.data.ArrayReader`,用于将数据解析成`PersonRecord`实例。 #### 三、数据转换 在创建完`Ext.data.Store`实例后,执行`store.load()`方法会触发数据转换的过程。`MemoryProxy`从内存中读取...

    Ext.data.Store 读取XML属性值

    这篇博客文章《Ext.data.Store 读取XML属性值》可能深入探讨了如何利用`Ext.data.reader.Xml`来解析XML并填充数据存储。 XML是一种结构化数据格式,广泛用于数据交换,尤其是Web服务和API。`Ext.data.reader.Xml`是...

    Ext3.2的Ext.data.Store类和Ext.Ajax类的实际运用

    环境:Window XP Sp2、Tomcat 6.0、...关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们框架系统是非常有帮助的。本示例代码注释非常详细。 阅读对象:需要使用Ext框架进行Web开发的人员

    Ext.data专题

    **Ext.data** 是一个重要的JavaScript库组件,用于处理数据传输和管理。它定义了一系列的核心概念,包括 **Store**、**Reader** 和 **Proxy**,这些都是Ext.data的核心组成部分。通过这些概念,开发者能够轻松地管理...

    Ext.Store的获取方法

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

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    store: Ext.create('Ext.data.Store', { fields: ['name', 'value'], proxy: { type: 'ajax', url: 'data.json', // 本地数据文件路径 reader: { type: 'json', rootProperty: 'items' } }, autoLoad: ...

    Extjs 继承Ext.data.Store不起作用原因分析及解决

    关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....

    Ext.tree.TreeLoader附带封装的json类

    4. **load**: 加载数据的方法,可以在此方法中处理数据解析和节点创建。 5. **params**: 发送请求时附带的额外参数。 JSON数据结构对于`TreeLoader`来说非常重要。一个适合树形视图的JSON数据应该包含以下元素: -...

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    Ext.get与Ext.fly的区别

    ### Ext.get与Ext.fly的区别 在Ext JS框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们主要用于操作DOM元素。理解这两个方法之间的区别以及如何使用它们对于开发高质量、高效率的应用程序至关重要。 #### ...

    Ext.DataView 图片列表显示

    var reader = new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},record); store = new Ext.data.Store({ proxy:proxy, reader:reader }); //尾 分页 var pagebar = new Ext....

    Ext.Ajax.request2.x实现同步请求

    本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,它是Asynchronous JavaScript and XML的缩写,虽然现在XML已不再是主要的数据交换格式,但...

    org.restlet.ext.spring.jar

    org.restlet.ext.spring.jar

    EXT.form组件

    EXT.form组件是EXT JS库中用于构建表单界面的核心组件集合。这些组件提供了一系列丰富的控件,用于创建具有不同功能的交互式表单。在EXT JS中,表单组件不仅包含基本的输入字段,还支持复杂的输入类型和验证机制。 ...

    一个简单的Ext.Window中插入图片的例子

    在Ext JS这个强大的JavaScript框架中,`Ext.Window`是一个常用组件,用于创建浮动、可弹出的窗口。在Web应用程序中,我们常常需要在这些窗口中展示各种内容,包括文字、表格、按钮,当然还有图片。本文将详细介绍...

    深入浅出Ext_JS:数据存储与传输

    Ext.data是一个专门处理数据的模块,它包含了store、reader和proxy等组件,这些组件协同工作以确保数据在前端和后端之间高效、灵活地流动。Store是数据容器,负责存储和管理数据;Reader则负责解析从服务器接收到的...

    Ext.js教程和Ext.js API

    Ext.js 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件和数据绑定功能,使得开发者可以构建出具有桌面应用级别的交互式网页应用。本教程和API文档聚焦于Ext.js 3.0版本...

    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.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_文档...

    vbe6ext.olb

    运行Microsoft office时,vbe6ext.olb不能加载

Global site tag (gtag.js) - Google Analytics