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实例。
- varconn=newExt.data.Connection({
- autoAbort:false,
- defaultHeaders:{
- referer:'http://www.sina.com.cn'
- },
- disableCaching:false,
- extraParams:{
- name:'name'
- },
- method:'GET',
- timeout:300,
- url:'01-01.txt'
- });
(2) 在创建conn之后,可以调用request()函数发送请求,处理返回的结果。
- conn.request({
- success:function(response){
- Ext.Msg.alert('info',response.responseText);
- },
- failure:function(){
- Ext.Msg.alert('warn','failure');
- }
- });
(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类型,如下所示:
- varPersonRecord=Ext.data.Record.create([
- {name:'name',type:'string'},
- {name:'sex',type:'int'}
- ]);
(2) PersonRecord就是我们定义的新类型,然后我们使用new关键字创建PersonRecord的实例:
- varboy=newPersonRecord({
- name:'boy',
- sex:0
- });
(3) 现在,我们得到了PersonRecord的实例boy,如何得到它的属性值?以下有三种方法:
- alert(boy.data.name);
- alert(boy.data['name']);
- 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的实例,如下面代码:
- vardata=[
- ['boy',0],
- ['girl',1]
- ];
- varstore=newExt.data.Store({
- proxy:newExt.data.MemoryProxy(data),
- reader:newExt.data.ArrayReader({},PersonRecord)
- });
- 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实例。
- varconn=newExt.data.Connection({
- autoAbort:false,
- defaultHeaders:{
- referer:'http://www.sina.com.cn'
- },
- disableCaching:false,
- extraParams:{
- name:'name'
- },
- method:'GET',
- timeout:300,
- url:'01-01.txt'
- });
(2) 在创建conn之后,可以调用request()函数发送请求,处理返回的结果。
- conn.request({
- success:function(response){
- Ext.Msg.alert('info',response.responseText);
- },
- failure:function(){
- Ext.Msg.alert('warn','failure');
- }
- });
(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类型,如下所示:
- varPersonRecord=Ext.data.Record.create([
- {name:'name',type:'string'},
- {name:'sex',type:'int'}
- ]);
(2) PersonRecord就是我们定义的新类型,然后我们使用new关键字创建PersonRecord的实例:
- varboy=newPersonRecord({
- name:'boy',
- sex:0
- });
(3) 现在,我们得到了PersonRecord的实例boy,如何得到它的属性值?以下有三种方法:
- alert(boy.data.name);
- alert(boy.data['name']);
- 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的实例,如下面代码:
- vardata=[
- ['boy',0],
- ['girl',1]
- ];
- varstore=newExt.data.Store({
- proxy:newExt.data.MemoryProxy(data),
- reader:newExt.data.ArrayReader({},PersonRecord)
- });
- store.load();
(2) 每个store最少需要两个组件的支持,分别是proxy和reader,proxy是用于从某个途径读取原始数据,reader用于将原始数据转换成Record实例。
四、小结
本章主要详细介绍了Ext.data.Record和Ext.data.Store的功能和基本使用方法,这两个类结合起来形成了Ext.data中的主体数据模型,很多组件都是建立在它们之上的,至于其他的常用的proxy,reader,store:SimpleStore和JsonStore则在后面学习中给出详细介绍。
分享到:
相关推荐
EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理) EXTJS4自学手册——EXT数据结构组件(proxy...
在ExtJS4.0中,数据处理的关键是从传统的面向过程转向面向对象的方法,这主要体现在Model、Store和Proxy的使用上。Model作为数据模型,负责定义数据结构和业务逻辑,类似于实体类。例如,在C#或Java中,我们通常会...
### Extjs数据存储与传输详解 #### 一、Ext.data简介 **Ext.data**是Extjs框架中的核心组件之一,负责处理数据的加载、存储、转换以及与后端服务器之间的通信。它提供了一系列用于管理数据的类,包括Store、Reader...
在“ExtJS深入浅出介绍之数据存储与传输”这一主题中,我们将深入探讨ExtJS如何处理后台数据的存储和交换。 一、数据存储 1. **Store(数据存储)**:在ExtJS中,Store是数据的核心管理器,用于存储和管理数据集。...
### extjs数据存储与传输深度解析 #### 一、Ext.data概述 `Ext.data`是Extjs框架中处理数据的核心模块,它提供了一套全面的数据处理解决方案,包括数据的存储、读取、转换以及与服务器的通信。此模块定义了一系列...
这篇博客文章 "ExtJS 使用grid显示数据" 可能详细阐述了如何利用ExtJS的Grid面板来展示和操作数据。 在ExtJS中,Grid Panel是一种数据驱动的组件,它允许开发者以表格的形式展示大量数据,并且支持分页、排序、过滤...
- **Proxy 原理**:Proxy 在 ExtJS 4.0 中扮演着数据传输者的角色,负责数据的读取和存储。 - **代理类型**:包括内存代理(Memory)、AJAX 代理(Ajax)、REST 代理(Rest)等多种类型,每种代理适用于不同的场景。...
Extjs数据的存储和传输以及相关的一些数据处理
表格控件(Grid)是ExtJS的核心组件之一,其功能强大,包括列排序、数据缓存、拖放操作、列隐藏、行号显示、列汇总和单元格编辑等。创建一个基本的Grid,需要定义列模型(ColumnModel),其中包含了每一列的标题和...
1. **获取Grid数据**:在EXTJS中,Grid的数据存储在Store对象中。要导出数据,我们需要先从Store中获取所有的记录。这可以通过调用`store.getData()`方法来完成,返回的是一个包含所有记录的数据对象。 2. **构建...
标题中的“extjs 数据导出到Excel,数据列自选”指的是使用EXTJS框架实现一个功能,让用户能够从Web应用中选择需要的数据列,并将这些选定的数据导出为Excel文件。EXTJS是一个强大的JavaScript库,专门用于构建富...
SpringMVC和ExtJS是两种在Web开发中广泛使用的框架,SpringMVC是Spring框架的一部分,主要用于构建后端服务,而ExtJS则是一款强大的前端JavaScript库,用于创建用户界面。当这两个技术结合在一起时,可以实现高效的...
本文将详细介绍如何在ExtJS中使用AJAX来实现前后端之间的数据传递,特别是关注JSON格式的数据传输。 #### 二、ExtJS中的AJAX数据传递 ##### 1. AJAX数据传递方式 - **POST方法**:通常用于提交表单数据到服务器。...
ExtJS的数据绑定使得UI组件可以直接与数据存储关联,当数据源发生变化时,UI会自动更新。例如,一个`Ext.form.Panel`可以通过`bind`配置项与Store绑定,如`{fieldLabel: 'Name', xtype: 'textfield', bind: '{user....
Store是EXTJS用来存储数据的容器,而AjaxProxy则负责与服务器进行异步通信。 创建一个EXTJS的Grid实例时,需要配置Store的proxy属性为AjaxProxy,设置其URL指向PHP API接口。同时,可以启用Store的autoLoad和...
**Nutz+ExtJS示例教程——后台Service实现** Nutz和ExtJS是两种不同的技术栈,它们在Web开发中有着各自的应用。Nutz是一款基于Java的轻量级框架,它提供了全面的Web开发解决方案,包括ORM、AOP、IOC等。而ExtJS则是...
总的来说,Highstock与ExtJS的结合使用,可以创造出功能强大、界面美观且交互性强的数据分析和展示平台。通过PHP后端的支持,可以实现动态数据更新和大规模数据的处理。这种组合不仅适用于金融领域的股票分析,也...
在本篇文章中,我们将深入探讨如何使用ExtJS与Gride进行交互,创建功能丰富的数据网格。 首先,理解ExtJS Grid的基本结构至关重要。Grid由以下几个主要部分组成: 1. **Store**: 存储数据的容器,可以是本地数据...
在数据交互设计中,我们将探讨如何使用ExtJS来有效地与服务器进行数据交换,包括加载、保存、更新和删除数据。 描述中提到的链接指向了一篇在iteye博客上的文章,虽然具体内容没有提供,但我们可以根据常见的ExtJS...
在"ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇"中,我们将深入探讨两个核心组件:动态菜单(Dynamic Menus)和表格数据展示(Grid Data Display),以及如何在实际应用中进行操作。 动态菜单在Web应用中...