`

ExtJS的使用方法汇总7——数据存储与传输

 
阅读更多

Ext.data在命名空间中定义了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data为媒介获取数据的,它包含异步加载、类型转换、分页等功能。EXT默认支持Array、JSON、XML等数据格式,可以通过Memory、HTTP、ScriptTag等方式获得这些格式的数据。如果要实现新的协议和新的数据结构,只需要扩展reader和proxy即可。本章主要介绍EXT中的数据存储与传输。

一、Ext.data.Connection

Ext.data.Connection主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中执行与后台交互的任务,它会从指定的URL获得数据,并把后台返回的数据交给HttpProxy或ScriptTagProxy处理,Ext.data.Connection的使用方式如下面所示:

(1) 首先创建一个新的Ext.data.Connection实例。

[c-sharp] view plaincopy
  1. varconn=newExt.data.Connection({
  2. autoAbort:false,
  3. defaultHeaders:{
  4. referer:'http://www.sina.com.cn'
  5. },
  6. disableCaching:false,
  7. extraParams:{
  8. name:'name'
  9. },
  10. method:'GET',
  11. timeout:300,
  12. url:'01-01.txt'
  13. });

(2) 在创建conn之后,可以调用request()函数发送请求,处理返回的结果。

[c-sharp] view plaincopy
  1. conn.request({
  2. success:function(response){
  3. Ext.Msg.alert('info',response.responseText);
  4. },
  5. failure:function(){
  6. Ext.Msg.alert('warn','failure');
  7. }
  8. });

(3) Ext.data.Connection还提供了abort([Number transactionId])函数,当同时有多个请求发生时,根据指定的事务id放弃其中的某一个请求,如果不指定id,则会放弃最后一个请求。

二、Ext.data.Record

Ext.data.Record就是一个设定了内部数据类型的对象,它是Ext.data.Store的最基本组成部分。Ext.data.Record的主要功能是保存数据,并且在内部数据发生改变时记录修改的状态,它还可以保留修改之前的原始值。

(1) 我们使用Ext.data.Record时,通常都是由create()函数开始,首先用create()函数创建一个自定义的Recore类型,如下所示:

[c-sharp] view plaincopy
  1. varPersonRecord=Ext.data.Record.create([
  2. {name:'name',type:'string'},
  3. {name:'sex',type:'int'}
  4. ]);

(2) PersonRecord就是我们定义的新类型,然后我们使用new关键字创建PersonRecord的实例:

[c-sharp] view plaincopy
  1. varboy=newPersonRecord({
  2. name:'boy',
  3. sex:0
  4. });

(3) 现在,我们得到了PersonRecord的实例boy,如何得到它的属性值?以下有三种方法:

[c-sharp] view plaincopy
  1. alert(boy.data.name);
  2. alert(boy.data['name']);
  3. alert(boy.get['name']);

三、Ext.data.Store

Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件,无论是Grid还是ComBox,都是通过它实现数据读取、类型转换、排序分列和搜索等操作。Ext.data.Store中有一个Ext.data.Record数组,所有数据都存放在这些Ext.data.Record实例中,为后面的读取和修改操作做准备。

(1) 在使用之前,首先要创建一个Ext.data.Store的实例,如下面代码:

[c-sharp] view plaincopy
  1. vardata=[
  2. ['boy',0],
  3. ['girl',1]
  4. ];
  5. varstore=newExt.data.Store({
  6. proxy:newExt.data.MemoryProxy(data),
  7. reader:newExt.data.ArrayReader({},PersonRecord)
  8. });
  9. store.load();

(2) 每个store最少需要两个组件的支持,分别是proxy和reader,proxy是用于从某个途径读取原始数据,reader用于将原始数据转换成Record实例。

四、小结

本章主要详细介绍了Ext.data.Record和Ext.data.Store的功能和基本使用方法,这两个类结合起来形成了Ext.data中的主体数据模型,很多组件都是建立在它们之上的,至于其他的常用的proxy,reader,store:SimpleStore和JsonStore则在后面学习中给出详细介绍。

Ext.data在命名空间中定义了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data为媒介获取数据的,它包含异步加载、类型转换、分页等功能。EXT默认支持Array、JSON、XML等数据格式,可以通过Memory、HTTP、ScriptTag等方式获得这些格式的数据。如果要实现新的协议和新的数据结构,只需要扩展reader和proxy即可。本章主要介绍EXT中的数据存储与传输。

一、Ext.data.Connection

Ext.data.Connection主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中执行与后台交互的任务,它会从指定的URL获得数据,并把后台返回的数据交给HttpProxy或ScriptTagProxy处理,Ext.data.Connection的使用方式如下面所示:

(1) 首先创建一个新的Ext.data.Connection实例。

[c-sharp] view plaincopy
  1. varconn=newExt.data.Connection({
  2. autoAbort:false,
  3. defaultHeaders:{
  4. referer:'http://www.sina.com.cn'
  5. },
  6. disableCaching:false,
  7. extraParams:{
  8. name:'name'
  9. },
  10. method:'GET',
  11. timeout:300,
  12. url:'01-01.txt'
  13. });

(2) 在创建conn之后,可以调用request()函数发送请求,处理返回的结果。

[c-sharp] view plaincopy
  1. conn.request({
  2. success:function(response){
  3. Ext.Msg.alert('info',response.responseText);
  4. },
  5. failure:function(){
  6. Ext.Msg.alert('warn','failure');
  7. }
  8. });

(3) Ext.data.Connection还提供了abort([Number transactionId])函数,当同时有多个请求发生时,根据指定的事务id放弃其中的某一个请求,如果不指定id,则会放弃最后一个请求。

二、Ext.data.Record

Ext.data.Record就是一个设定了内部数据类型的对象,它是Ext.data.Store的最基本组成部分。Ext.data.Record的主要功能是保存数据,并且在内部数据发生改变时记录修改的状态,它还可以保留修改之前的原始值。

(1) 我们使用Ext.data.Record时,通常都是由create()函数开始,首先用create()函数创建一个自定义的Recore类型,如下所示:

[c-sharp] view plaincopy
  1. varPersonRecord=Ext.data.Record.create([
  2. {name:'name',type:'string'},
  3. {name:'sex',type:'int'}
  4. ]);

(2) PersonRecord就是我们定义的新类型,然后我们使用new关键字创建PersonRecord的实例:

[c-sharp] view plaincopy
  1. varboy=newPersonRecord({
  2. name:'boy',
  3. sex:0
  4. });

(3) 现在,我们得到了PersonRecord的实例boy,如何得到它的属性值?以下有三种方法:

[c-sharp] view plaincopy
  1. alert(boy.data.name);
  2. alert(boy.data['name']);
  3. alert(boy.get['name']);

三、Ext.data.Store

Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件,无论是Grid还是ComBox,都是通过它实现数据读取、类型转换、排序分列和搜索等操作。Ext.data.Store中有一个Ext.data.Record数组,所有数据都存放在这些Ext.data.Record实例中,为后面的读取和修改操作做准备。

(1) 在使用之前,首先要创建一个Ext.data.Store的实例,如下面代码:

[c-sharp] view plaincopy
  1. vardata=[
  2. ['boy',0],
  3. ['girl',1]
  4. ];
  5. varstore=newExt.data.Store({
  6. proxy:newExt.data.MemoryProxy(data),
  7. reader:newExt.data.ArrayReader({},PersonRecord)
  8. });
  9. store.load();

(2) 每个store最少需要两个组件的支持,分别是proxy和reader,proxy是用于从某个途径读取原始数据,reader用于将原始数据转换成Record实例。

四、小结

本章主要详细介绍了Ext.data.Record和Ext.data.Store的功能和基本使用方法,这两个类结合起来形成了Ext.data中的主体数据模型,很多组件都是建立在它们之上的,至于其他的常用的proxy,reader,store:SimpleStore和JsonStore则在后面学习中给出详细介绍。

分享到:
评论

相关推荐

    EXTJS4自学手册

    EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理) EXTJS4自学手册——EXT数据结构组件(proxy...

    ExtJS4.0图文实例——数据组件介绍及简单应用

    在ExtJS4.0中,数据处理的关键是从传统的面向过程转向面向对象的方法,这主要体现在Model、Store和Proxy的使用上。Model作为数据模型,负责定义数据结构和业务逻辑,类似于实体类。例如,在C#或Java中,我们通常会...

    extjs数据存储与传输详解

    ### Extjs数据存储与传输详解 #### 一、Ext.data简介 **Ext.data**是Extjs框架中的核心组件之一,负责处理数据的加载、存储、转换以及与后端服务器之间的通信。它提供了一系列用于管理数据的类,包括Store、Reader...

    ExtJS深入浅出介绍之数据存储于传输

    在“ExtJS深入浅出介绍之数据存储与传输”这一主题中,我们将深入探讨ExtJS如何处理后台数据的存储和交换。 一、数据存储 1. **Store(数据存储)**:在ExtJS中,Store是数据的核心管理器,用于存储和管理数据集。...

    extjs数据存储与传输

    ### extjs数据存储与传输深度解析 #### 一、Ext.data概述 `Ext.data`是Extjs框架中处理数据的核心模块,它提供了一套全面的数据处理解决方案,包括数据的存储、读取、转换以及与服务器的通信。此模块定义了一系列...

    ExtJS 使用grid显示数据

    这篇博客文章 "ExtJS 使用grid显示数据" 可能详细阐述了如何利用ExtJS的Grid面板来展示和操作数据。 在ExtJS中,Grid Panel是一种数据驱动的组件,它允许开发者以表格的形式展示大量数据,并且支持分页、排序、过滤...

    extjs4中文视频下载地址

    - **Proxy 原理**:Proxy 在 ExtJS 4.0 中扮演着数据传输者的角色,负责数据的读取和存储。 - **代理类型**:包括内存代理(Memory)、AJAX 代理(Ajax)、REST 代理(Rest)等多种类型,每种代理适用于不同的场景。...

    Extjs数据的存储和传输

    Extjs数据的存储和传输以及相关的一些数据处理

    ExtJS的使用方法汇总--doc文档

    表格控件(Grid)是ExtJS的核心组件之一,其功能强大,包括列排序、数据缓存、拖放操作、列隐藏、行号显示、列汇总和单元格编辑等。创建一个基本的Grid,需要定义列模型(ColumnModel),其中包含了每一列的标题和...

    extjs grid数据导出excel文件

    1. **获取Grid数据**:在EXTJS中,Grid的数据存储在Store对象中。要导出数据,我们需要先从Store中获取所有的记录。这可以通过调用`store.getData()`方法来完成,返回的是一个包含所有记录的数据对象。 2. **构建...

    extjs 数据导出到Excel,数据列自选

    标题中的“extjs 数据导出到Excel,数据列自选”指的是使用EXTJS框架实现一个功能,让用户能够从Web应用中选择需要的数据列,并将这些选定的数据导出为Excel文件。EXTJS是一个强大的JavaScript库,专门用于构建富...

    SpringMVC+ExtJS完美集成(数据传输方式为JSON和model)

    SpringMVC和ExtJS是两种在Web开发中广泛使用的框架,SpringMVC是Spring框架的一部分,主要用于构建后端服务,而ExtJS则是一款强大的前端JavaScript库,用于创建用户界面。当这两个技术结合在一起时,可以实现高效的...

    extjs的数据传递

    本文将详细介绍如何在ExtJS中使用AJAX来实现前后端之间的数据传递,特别是关注JSON格式的数据传输。 #### 二、ExtJS中的AJAX数据传递 ##### 1. AJAX数据传递方式 - **POST方法**:通常用于提交表单数据到服务器。...

    extjs最简单的数据绑定和修改

    ExtJS的数据绑定使得UI组件可以直接与数据存储关联,当数据源发生变化时,UI会自动更新。例如,一个`Ext.form.Panel`可以通过`bind`配置项与Store绑定,如`{fieldLabel: 'Name', xtype: 'textfield', bind: '{user....

    php+extjs+grid实时显示更新数据

    Store是EXTJS用来存储数据的容器,而AjaxProxy则负责与服务器进行异步通信。 创建一个EXTJS的Grid实例时,需要配置Store的proxy属性为AjaxProxy,设置其URL指向PHP API接口。同时,可以启用Store的autoLoad和...

    Nutz+ExtJS示例教程——后台Service实现

    **Nutz+ExtJS示例教程——后台Service实现** Nutz和ExtJS是两种不同的技术栈,它们在Web开发中有着各自的应用。Nutz是一款基于Java的轻量级框架,它提供了全面的Web开发解决方案,包括ORM、AOP、IOC等。而ExtJS则是...

    Highstock与ExtJs结合使用

    总的来说,Highstock与ExtJS的结合使用,可以创造出功能强大、界面美观且交互性强的数据分析和展示平台。通过PHP后端的支持,可以实现动态数据更新和大规模数据的处理。这种组合不仅适用于金融领域的股票分析,也...

    Extjs+Gride使用方法

    在本篇文章中,我们将深入探讨如何使用ExtJS与Gride进行交互,创建功能丰富的数据网格。 首先,理解ExtJS Grid的基本结构至关重要。Grid由以下几个主要部分组成: 1. **Store**: 存储数据的容器,可以是本地数据...

    经验总结-Extjs(一)数据交互设计

    在数据交互设计中,我们将探讨如何使用ExtJS来有效地与服务器进行数据交换,包括加载、保存、更新和删除数据。 描述中提到的链接指向了一篇在iteye博客上的文章,虽然具体内容没有提供,但我们可以根据常见的ExtJS...

    ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇

    在"ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇"中,我们将深入探讨两个核心组件:动态菜单(Dynamic Menus)和表格数据展示(Grid Data Display),以及如何在实际应用中进行操作。 动态菜单在Web应用中...

Global site tag (gtag.js) - Google Analytics