中小企业IT网方案库 

http://www.cbismb.com/solution/

docin解决方案资料

http://www.docin.com/app/docsearch?fn=&searchType_banner=p&dky=解决方案

评论: 0　查看评论　发表评论

找优秀程序员，就在博客园

最新新闻：
· 甲骨文将关闭OpenSSO(2010-03-20 23:54)
· 专访陈晓薇：九城已重建、我还没想好去哪(2010-03-20 22:07)
· [视频]社交媒体不仅仅是一时狂热(2010-03-20 21:58)
· Google开出首个1337美刀的Chrome bug奖励支票(2010-03-20 21:47)
· 著名图像讨论网站4chan创始人披露4chan诞生历史(2010-03-20 21:42)

编辑推荐：[视频]想做你的Code

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

ImageEnView1->IO->LoadFromFile("c:\\a.jpg");

ImageEnIO1->Params->EXIF_HasEXIFData = true;  

ImageEnIO1->Params->EXIF_XPTitle = "meetrice jpg exif test";  

ImageEnIO1->Update();  

ImageEnIO1->SaveToFile("d:\\a.jpg");

在窗体上关联 ImageEnView1和ImageEnIO1

评论: 0　查看评论　发表评论

找优秀程序员，就在博客园

最新新闻：
· 甲骨文将关闭OpenSSO(2010-03-20 23:54)
· 专访陈晓薇：九城已重建、我还没想好去哪(2010-03-20 22:07)
· [视频]社交媒体不仅仅是一时狂热(2010-03-20 21:58)
· Google开出首个1337美刀的Chrome bug奖励支票(2010-03-20 21:47)
· 著名图像讨论网站4chan创始人披露4chan诞生历史(2010-03-20 21:42)

编辑推荐：[视频]想做你的Code

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

1.创建自己的ActiveX控件
C++Buider开发ActiveX的功能非常强，但是这方面的资料却比较少，本人经过摸索终于搞定了创建Web方式Activex的基本方法
⑴打开BCB6,新建一个Activex工程,选择时注意选择ActiveX标签页的Active Form
⑵在弹出的对话框中设置ActiveX Name为  ActFrm,后面的实现单元和工程名都会自动更改
⑶勾选Make Control Licensed和Include Version Information,确定之后会出现一个和标准Form类似的
⑷在C++Builder自动创建的窗体上面添加一个按钮,随便实现一些功能，如ShowMessage("点击了按钮");

⑸设置Package相关参数。你肯定希望自己创建的ocx文件不依赖本机的开发环境，因此必须对编译器作适当的设置
ⅠProject->Option->Packages去掉Build With Runtime Packages 前面的勾
ⅡProject->Option->Linker  去掉动态RTL前面的勾,这样你产生的ocx文件就不会依赖BCB的开发环境了
好了做完上面的步骤，一个简单的Activex就创建完成了,可以选择Run菜单下的Register ActiveX Server进行注册,你就可以看到你的开发成果了,如果需要发布到互联网上，通过浏览器进行注册的话，那就需要做下面的设置
⑹设置Web Deployment Options
  点击Web Deployment Options菜单，出现Web Deployment 选项设置窗口,有三个属性页
  Ⅰ Project主要用于设置Activex文件的位置信息
      ①Target dir(Full path of the deployed OCX) 设置OCX目录，也就是在选择Project->WebDeploy之后ocx文件将要拷贝到的目录,我们可以在当前工程下建立一个punlished目录作为发布目录
       e.g:当前工程目录为f:\projscts\firstocx  发布目录为f:\projscts\firstocx\published(也就是Target dir)
      ②Target  URL( Virtual path of the deployed OCX)
       如果客户端没有安装我们制作的activex控件,浏览器会自动到指定的网址进行寻找
       e.g:本机IP192.168.0.228 端口 8080 虚拟目录 myapp(使用的Web服务器是Tomcat,myapp也就是D:\Tomcat\webapps下的目录)
       此处输入http://192.168.0.228:8080/myapp/
      ③HTML dir(Full path of the deployed HTML file)
       和Activex文件配套的html文件的存放位置,这里可以把它设置成f:\projscts\firstocx\published,主要是为了方便管理
       在General Options下勾选一下四项
       a.Use  CAB file compression              b.Deploy  required packages
       c.Include file  version number           d.Deploy additional  files
  ⅡPackages 这个页面用于发布控件中用到的额外的包，因为我们在第(5)步中已经去掉了额外的包，所以这一页为空
  ⅢAdditonal Files,这一页用于发布其它文件,至于ocx文件有没有用到其它的文件我们可以使用vc++带的工具 Dependency Walker来进行查看,根据Dependency Walker的显示结果我们知道ocx使用到的dll文件在windows的目录下已经存在，没有必要随我们的ocx文件一起发布
    但是由于我们制作控件的时候选择了Make Control Licensed，所以随包一起发布的应该还有一个lic文件，这个文件在工程目录下,我们在Additonal Files页中点击Add将lic文件包含进来就可以了
    这个lic文件让我做控件走了不少弯路,开发出来的控件在本地可以运行良好(也就是在c++builder的run菜单里面使用register Activex server注册 ),但是一旦移到其它位置总是不能成功,而且最开始的时候也不知道使用vc++带的ActiveX Control Test Container工具来测试已经生成的ocx控件
恩,点击WebDeploy菜单就大功告成了么?没有。如果我们将published目录下的内容全部拷贝到tomcat的myapp目录下，然后将IE的安全等级调到最低，我们仍然无法浏览刚才生成的ActiveX控件，浏览器窗口上面始终显示一把红叉。真让人泄气
不过不要放弃,我们继续进行第2步
2.实现IObjectSafety
  在IE6以及更高版本的浏览器中我们还必须实现IObjectSafety接口才能保证自己开发的ocx控件不会被IE禁用
  怎么实现呢？其实很简单，加上几句话就可以了
  ①打开ActFrm的头文件,我们最开始的时候已经在这个Form上面加了一个按钮,打开它的头文件后可以看到一个类class TAcFrm  不要管它,跟它没有什么关系，接着往下看，可以看到类似
  class ATL_NO_VTABLE TActFrmImpl:
         VCLCONTROL_IMPL(TActFrmImpl, ActFrm ..........)之类的代码,我们在括号之后再给他加个接口
  加完之后类似这样
   class ATL_NO_VTABLE TActFrmImpl:
         VCLCONTROL_IMPL(TActFrmImpl, ActFrm ..........),public IObjectSafetyImpl<TActFrmImpl,INTERFACESAFE_FOR_UNTRUSTED_CALLER>
  注意不要丢了public前面的逗号,多重继承必须的
  ②然后再 void InitializeControl(){}函数结束之后加入
  BEGIN_CATEGORY_MAP(TActFrmImpl)
      IMPLEMENTED_CATEGORY(CATID_SafeForScripting)
      IMPLEMENTED_CATEGORY(CATID_SafeForInitializing)
  END_CATEGORY_MAP()
  ③BEGIN_COM_MAP(TActFrmImpl)
      VCL_CONTROL_COM_INTERFACE_ENTRIES(IActiveFrmX)
     COM_INTERFACE_ENTRY(IObjectSafety)//加入这样一行就ok了
   END_COM_MAP()
  编译通过,应该没有问题
3.添加自定义的方法（接口）
  我们做的ActiveX控件应该要能够与javascript之类的脚本进行交互,所以我们在控件中要实现自己的接口
  选择菜单view->type library出现tlb文件的浏览窗口,这里面有一大堆的东西，都不要管它，我们直奔主题，找到IActFrm点击右键新建一个方法,就叫做ShowValue吧
  在改方法的parameters页中给这个方法添加一个参数,参数名使用longvalue，参数类型使用variant,点击刷新按钮C++builder将自动给我们添加一个叫做ShowValue的方法,参数类型都设置好了，我们在这个函数里面添加ShowMessage(longvalue.iVal);
  然后在ocx对应的htm文件中添加相应的js代码
  默认生成的htm文件加载activex控件时是没有添加ID的，我们需要手动给它添加,假设id="myocx"，然后添加一个js函数
  <script language="javascript">
     function testfun(){
       myocx.ShowValue(12345);
     }
  </script>
  然后在这个页面中添加一个按钮，在这个按钮的onclick事件中触发testfun函数,此处不再噜苏
  记得把这些文件拷贝到服务器上，不然会因为.inf文件找不到而导致activex不能正常显示
4.使用ActiveX Control Test Container进行测试
  ActiveX Control Test Container是个好东西，没有它，我还真不知道我编写的activex控件那里有问题呐
  这个工具随vc++一起安装，使用起来非常简单,打开之后选择edit->insert new control从控件列表中选择一个activex控件就可以了，这里当然是选择ActFrm罗
5.实现数字签名
  要是浏览器允许你任意下载activex控件的话，故事到这里也就结束了。可事实是，为了保证安全，浏览器是不会下载没有签名的控件的，如果控件没有签名，浏览器压根就不会给出任何提示，浏览器上面只有一把红叉
  ie有点残忍哈
  没关系，自己Diy一个签名就可以让浏览器给出下载提示框了。
  制作签名需要下面这些工具 makecert signcode cert2spc还有如果你需要自己打包ocx的话需要iexpress工具，这个工具在windows安装目录里面有
  前面三个工具可以从微软的官方站点获取
  手工编写一个bat文件(主要是不习惯一遍又一遍地敲命令),将这个bat文件放到f:\projscts\firstocx\published目录下
  makecert /sv "ActFrmProj1.PVK" /n "CN=公司名称,E=email,O=作者" ActFrmProj1.cer
  cert2spc ActFrmProj1.cer ActFrmProj1.spc
  signcode
  当然要用到这三条命令的话你必须将这三个文件的路径加入到windows环境变量path中去
  第一条命令产生ActFrmProj1.cer 和 ActFrmProj1.PVK 两个文件
  第二步将ActFrmProj1.cer 转为ActiveProj1.spc文件
  这个过程中会要求你输入密码,自己随便输一个，记不记得都没关系
  第三步就是给我们生成的cab文件前面，图形界面操作很容易
  ①选择BCB自动生成的cab文件,应该在f:\projscts\firstocx\published目录下
  ②签名类型选择自定义
  ③从文件选择一个证书,这里没有其它选择只有一个文件就是f:\projscts\firstocx\published下的spc文件
  ④私钥位置选择CSP中的私钥
  ⑤密钥容器选择ActFrmPrj1.pvk,这个文件就是第一步生成的那个pvk
  ⑥算法选择md5或者sha都可以，然后在其它证书中浏览,选择我们生成的ActFrmProj1.cer搞定了
  
  然后将puulished目录下的文件全部拷贝到myapp目录下，通过浏览器进行访问， 浏览器会弹出提示问是否要安装Activex控件，当然选是呐，不然岂不是白忙活了？

6.调试Activex的技巧
当我们使用BCB开发控件的时候会发现F9不能运行，原因就是ocx工作方式和dll文件类似，我们可以通过设置运行参数来解决这个问题,Run->Paramters在host appliaction 中选择ie，e.g:C:\Program Files\Internet Explorer\IEXPLORE.EXE
parameters输入如下:f:\projscts\firstocx\published\ActiveFrmProj.htm
再按F9就可以直接运行了

评论: 0　查看评论　发表评论

找优秀程序员，就在博客园

最新新闻：
· 甲骨文将关闭OpenSSO(2010-03-20 23:54)
· 专访陈晓薇：九城已重建、我还没想好去哪(2010-03-20 22:07)
· [视频]社交媒体不仅仅是一时狂热(2010-03-20 21:58)
· Google开出首个1337美刀的Chrome bug奖励支票(2010-03-20 21:47)
· 著名图像讨论网站4chan创始人披露4chan诞生历史(2010-03-20 21:42)

编辑推荐：[视频]想做你的Code

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft\Java Runtime Environment]"CurrentVersion"="1.5"

[HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft\Java Runtime Environment\1.5]"JavaHome"="D:\\jdk1.5.0_11""RuntimeLib"="D:\\jdk1.5.0_11\\jre\bin\\client\\jvm.dll""MicroVersion"="0"
[HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft\Java Runtime Environment\1.5.0]"JavaHome"="D:\\jdk1.5.0_11""MicroVersion"="0""RuntimeLib"="D:\\jdk1.5.0_11\\jre\bin\\client\\jvm.dll"

评论: 0　查看评论　发表评论

找优秀程序员，就在博客园

最新新闻：
· 甲骨文将关闭OpenSSO(2010-03-20 23:54)
· 专访陈晓薇：九城已重建、我还没想好去哪(2010-03-20 22:07)
· [视频]社交媒体不仅仅是一时狂热(2010-03-20 21:58)
· Google开出首个1337美刀的Chrome bug奖励支票(2010-03-20 21:47)
· 著名图像讨论网站4chan创始人披露4chan诞生历史(2010-03-20 21:42)

编辑推荐：[视频]想做你的Code

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

*.~* //备份
*.bak //备份
*.bat //命令行批处理文件
*.tds //IDE环境布局配置文件，包括历史搜索项目等
*.obj //编译后产生的目标文件
*.dcu //Delphi源文件编译出来的目标文件
*.ddp //Diagram(图示）文件
*.tlb //由IDL(Interface Definition Language 缩写)定义文件生成的类型库文件
*.asm //汇编代码文件
*.inc //汇编格式头文件
*.hh,*.h,*.hpp //头文件 *.hpp 一般是由Delphi VCL转换而成
*.cc,*.c,*.cpp //C/C++文件
*.pas //Pascal/Delphi源文件
*.dfm //窗体定义文件
*.res //二进制资源文件
*.reg //注册表定义文件
*.rc //未编译的资源定义文件，此类文件编译后会生成.res，通常无须手动编译
*.def //定义文件
*.mak //低版本的工程文件
*.bpr //工程文件(通常为UTF8编码格式)
*.dpr //Delphi 工程文件
*.bpk //组件包工程文件
*.dpk //Delphi 组件包工程文件
*.dcr //组件图标资源文件
*.str //资源字符串临时文件
*.ico //标图文件
*.cur //鼠光标文件
*.ani //动态鼠光标文件
*.sql //SQL 脚本文件
*.rtf //格式文本文件
*.csv //带分隔符的文本型数据文件
*.ini //配置文件
*.inf //安装配置定义文件
*.log //信息文件，通常为用来记录程序运行状态，从而方便跟踪调试
*.cgl //CodeGuard CB自带的内存检查工具生成的信息文件
*.cgi //网关接口可执行文件，相关请参考Web服务当中的CGI
*.mdb //Access 数据库文件
*.db //Borland Paradox 桌面数据库表

评论: 0　查看评论　发表评论

找优秀程序员，就在博客园

最新新闻：
· 甲骨文将关闭OpenSSO(2010-03-20 23:54)
· 专访陈晓薇：九城已重建、我还没想好去哪(2010-03-20 22:07)
· [视频]社交媒体不仅仅是一时狂热(2010-03-20 21:58)
· Google开出首个1337美刀的Chrome bug奖励支票(2010-03-20 21:47)
· 著名图像讨论网站4chan创始人披露4chan诞生历史(2010-03-20 21:42)

编辑推荐：[视频]想做你的Code

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

评论: 0　查看评论　发表评论

找优秀程序员，就在博客园

最新新闻：
· 甲骨文将关闭OpenSSO(2010-03-20 23:54)
· 专访陈晓薇：九城已重建、我还没想好去哪(2010-03-20 22:07)
· [视频]社交媒体不仅仅是一时狂热(2010-03-20 21:58)
· Google开出首个1337美刀的Chrome bug奖励支票(2010-03-20 21:47)
· 著名图像讨论网站4chan创始人披露4chan诞生历史(2010-03-20 21:42)

编辑推荐：[视频]想做你的Code

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

原因是你用的ADO   for   ORACLE的驱动是微软的Microsoft OLE DB provider   for Oracle，不支持BLOB字段, 应使用ORACLE的驱动ORACLE   provider   for   OLE   DB，如果未装Oracle，可以  
  去Oracle公司网站下载这个驱动。

Microsoft OLE DB provider   for Oracle 的连接字符串:

Provider=MSDAORA.1;Password=nchyuser;User ID=nchyuser;Data Source=ncms

ORACLE   provider   for   OLE   DB的连接字符串:

Provider=OraOLEDB.Oracle;Password=nchyuser;Persist Security Info=True;User ID=nchyuser;Data Source=NCMS;Extended Properties=""

使用ORACLE   provider   for   OLE   DB的连接字符串就OK.

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zhuchengchuan/archive/2009/07/18/4358996.aspx

评论: 0　查看评论　发表评论

找优秀程序员，就在博客园

最新新闻：
· 甲骨文将关闭OpenSSO(2010-03-20 23:54)
· 专访陈晓薇：九城已重建、我还没想好去哪(2010-03-20 22:07)
· [视频]社交媒体不仅仅是一时狂热(2010-03-20 21:58)
· Google开出首个1337美刀的Chrome bug奖励支票(2010-03-20 21:47)
· 著名图像讨论网站4chan创始人披露4chan诞生历史(2010-03-20 21:42)

编辑推荐：[视频]想做你的Code

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

本章内容

q   Ext.data简介

q   Ext.data.Connection

q   Ext.data.Record

q   Ext.data.Store

q   常用proxy

q   常用reader

q   高级store

q   EXT中的Ajax

q   关于scope和createDelegate()

q   DWR与EXT整合

10.1　Ext.data简介

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

10.2　Ext.data.Connection

Ext.data.Connection是对Ext.lib.Ajax的封装，它提供了配置使用Ajax的通用方式，它在内部通过Ext.lib.Ajax实现与后台的异步调用。与底层的Ext.lib.Ajax相比，Ext.data. Connection提供了更简洁的配置方式，使用起来更方便。

Ext.data.Connection主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中执行与后台交互的任务，它会从指定的URL获得数据，并把后台返回的数据交给HttpProxy或ScriptTagProxy处理，Ext.data.Connection的使用方式如代码清单10-1所示。

代码清单10-1　使用Ext.data.Connection

var conn = new Ext.data.Connection({

    autoAbort: false,

    defaultHeaders: {

        referer: 'http://localhost:8080/'

    },

    disableCaching : false,

    extraParams : {

        name: 'name'

    },

    method : 'GET',

    timeout : 300,

    url : '01-01.txt'

});

在使用Ext.data.Connection之前，都要像上面这样创建一个新的Ext.Connection实例。我们可以在构造方法里配置对应的参数，比如autoAbort表示链接是否会自动断开、default- Headers参数表示请求的默认首部信息、disableCaching参数表示请求是否会禁用缓存、extraParams参数代表请求的额外参数、method参数表示请求方法、timeout参数表示连接的超时时间、url参数表示请求访问的网址等。

在创建了conn之后，可以调用request()函数发送请求，处理返回的结果，如下面的代码所示。

conn.request({

    success: function(response) {

        Ext.Msg.alert('info', response.responseText);

    },

    failure: function() {

        Ext.Msg.alert('warn', 'failure');

    }

});

Request()函数中可以设置success和failure两个回调函数，分别在请求成功和请求失败时调用。请求成功时，success函数的参数就是后台返回的信息。

我们再来看一下request函数中的其他参数。

q   url:String：请求url。

q   params:Object/String/Function：请求传递的参数。

q   method:String：请求方法，通常为GET或POST。

q   callback:Function：请求完成后的回调函数，无论是成功还是失败，都会执行。

q   success:Function：请求成功时的回调函数。

q   failure:Function：请求失败时的回调函数

q   scope:Object：回调函数的作用域。

q   form:Object/String：绑定的form表单。

q   isUpload:Boolean：是否执行文件上传。

q   headers:Object：请求首部信息。

q   xmlData:Object：XML文档对象，可以通过URL附加参数的方式发起请求。

q   disableCaching:Boolean：是否禁用缓存，默认为禁用。

Ext.data.Connection还提供了abort([Number transactionId])函数，当同时有多个请求发生时，根据指定的事务id放弃其中的某一个请求。如果不指定事务id，就会放弃最后一个请求。isLoading([Number transactionId])函数的用法与abort()类似，可以根据事务id判断对应的请求是否完成。如果未指定事务id，就判断最后一个请求是否完成。

10.3　Ext.data.Record

Ext.data.Record就是一个设定了内部数据类型的对象，它是Ext.data.Store的最基本组成部分。如果把Ext.data.Store看作是一张二维表，那么它的每一行就对应一个Ext.data. Record实例。

Ext.data.Record的主要功能是保存数据，并且在内部数据发生改变时记录修改的状态，它还可以保留修改之前的原始值。

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

var PersonRecord = Ext.data.Record.create([

    {name: 'name', type: 'string'},

    {name: 'sex', type: 'int'}

]);

PersonRecord就是我们定义的新类型，包含字符串类型的name和整数类型的sex两个属性，然后我们使用new关键字创建PersonRecord的实例，如下面的代码所示。

var boy = new PersonRecord({

    name: 'boy',

    sex: 0

});

创建对象时，可以直接通过构造方法为对象赋予初始值，将'boy'赋值给name，0赋值给sex。

现在，我们得到了PersonRecord的实例boy，如何才能得到它的属性呢？以下三种方式都可以获得boy中name属性的数据，如下面的代码所示。

alert(boy.data.name);

alert(boy.data['name']);

alert(boy.get('name'));

这里涉及Ext.data.Record的data属性，这是定义在Ext.data.Record中的一个公共属性，用于保存当前record对象的所有数据。它是一个JSON对象，可以直接从它里面获得需要的数据。可以通过Ext.data.Record的get()函数方便地从data属性中获得指定的属性值。

如果我们需要修改boy中的数据，请不要使用以下方式直接操作data，如下面的代码所示。

    boy.data.name = 'boy name';

    boy.data['name'] = 'boy name';

而应该使用set()函数，如下面的代码所示。

    boy.set('name', 'body name');

set()函数会判断属性值是否发生了改变，如果改变了，就要将当前对象的dirty属性设置为true，并将修改之前的原始值放入modified对象中，供其他函数使用。如果直接操作data中的值，record就无法记录属性数据的修改情况。

Record的属性数据被修改后，我们可以执行如下几种操作。

q   commit()（提交）：这个函数的效果是设置dirty为false，并删除modified中保存的原始数据。

q   reject()（撤销）：这个函数的效果是将data中已经修改了的属性值都恢复成modified中保存的原始数据，然后设置dirty为false，并删除保存原始数据的modified对象。

q   getChanges()获得修改的部分：这个函数会把data中经过修改的属性和数据放在一个JSON对象里并返回。例如上例中，getChanges()返回的结果是{name:’body name’}。

q   我们还可以调用isModified()判断当前record中的数据是否被修改。

      Ext.data.Record还提供了用于复制record实例的函数copy()。

  var copyBoy = boy.copy();

这样我们就得到了boy的一个副本，它里面包含了boy的data数据，但copy()函数不会复制dirty和modified等额外的属性值。

Ext.data.Record中其他的参数大多与Ext.data.Store有关，请参考与Ext.data.Store相关的讨论。

10.4　Ext.data.Store

Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件，无论是Grid还是ComboBox，都是通过它实现数据读取、类型转换、排序分页和搜索等操作的。

Ext.data.Store中有一个Ext.data.Record数组，所有数据都存放在这些Ext.data. Record实例中，为后面的读取和修改操作做准备。

10.4.1　基本应用

在使用之前，首先要创建一个Ext.data.Store的实例，如下面的代码所示。

var data = [

    ['boy', 0],

    ['girl', 1]

];

var store = new Ext.data.Store({

    proxy: new Ext.data.MemoryProxy(data),

    reader: new Ext.data.ArrayReader({}, PersonRecord)

});

store.load();

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

这里我们使用的是Ext.data.MemoryProxy和Ext.data.ArrayReader，将data数组中的数据转换成对应的几个PersonRecord实例，然后放入store中。store创建完毕之后，执行store.load()实现这个转换过程。

经过转换之后，store里的数据就可以提供给Grid或ComboBox使用了，这就是Ext.data. Store的最基本用法。

10.4.2　对数据进行排序

Ext.data.Store提供了一系列属性和函数，利用它们对数据进行排序操作。

可以在创建Ext.data.Store时使用sortInfo参数指定排序的字段和排序方式，如下面的代码所示。

var store = new Ext.data.Store({

    proxy: new Ext.data.MemoryProxy(data),

    reader: new Ext.data.ArrayReader({}, PersonRecord),

    sortInfo: {field: 'name', direction: 'DESC'}

});

这样，在store加载数据之后，就会自动根据name字段进行降序排列。对store使用store.setDefaultSort('name','DESC');也会达到同样效果。

也可以在任何时候调用sort()函数，比如store.sort('name', 'DESC');，对store中的数据进行排序。

如果我们希望获得store的排序信息，可以调用getSortState()函数，返回的是类似{field: "name", direction: " DESC"}的JSON对象。

与排序相关的参数还有remoteSort，这个参数是用来实现后台排序功能的。当设置为remoteSort:true时，store会在向后台请求数据时自动加入sort和dir两个参数，分别对应排序的字段和排序的方式，由后台获取并处理这两个参数，在后台对所需数据进行排序操作。remoteSort:true也会导致每次执行sort()时都要去后台重新加载数据，而不能只对本地数据进行排序。

详细的用法可以参考第2章。

10.4.3　从store中获取数据

从store中获取数据有很多种途径，可以依据不同的要求选择不同的函数。最直接的方法是根据record在store中的行号获得对应的record，得到了record就可以使用get()函数获得里面的数据了，如下面的代码所示。

store.getAt(0).get('name')

通过这种方式，我们可以遍历store中所有的record，依次得到它们的数据，如下面的代码所示。

for (var i = 0; i < store.getCount(); i++) {

    var record = store.getAt(i);

    alert(record.get('name'));

}

Store.getCount()返回的是store中的所有数据记录，然后使用for循环遍历整个store，从而得到每条记录。

除了使用getCount()的方法外，还可以使用each()函数，如下面的代码所示。

store.each(function(record) {

    alert(record.get('name'));

});

Each()可以接受一个函数作为参数，遍历内部record，并将每个record作为参数传递给function()处理。如果希望停止遍历，可以让function()返回false。

也可以使用getRange()函数连续获得多个record，只需要指定开始和结束位置的索引值，如下面的代码所示。

var records = store.getRange(0, 1);

for (var i = 0; i < records.length; i++) {

    var record = records[i];

    alert(record.get('name'));

}

如果确实不知道record的id，也可以根据record本身的id从store中获得对应的record，如下面的代码所示。

store.getById(1001).get('name')

EXT还提供了函数find()和findBy()，可以利用它们对store中的数据进行搜索，如下面的代码所示。

find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch],

[Boolean caseSensitive] )

在这5个参数中，只有前两个是必须的。第一个参数property代表搜索的字段名；第二个参数value是匹配用字符串或正则表达式；第三个参数startIndex表示从第几行开始搜索，第四个参数anyMatch为true时，不必从头开始匹配；第五个参数caseSensitive为true时，会区分大小写。

如下面的代码所示：

var index = store.find('name','g');

alert(store.getAt(index).get('name'));

与find()函数对应的findBy()函数的定义格式如下：

findBy( Function fn, [Object scope], [Number startIndex] ) : Number

findBy()函数允许用户使用自定义函数对内部数据进行搜索。fn返回true时，表示查找成功，于是停止遍历并返回行号。fn返回false时，表示查找失败（即未找到），继续遍历，如下面的代码所示。

index = store.findBy(function(record, id) {

    return record.get('name') == 'girl' && record.get('sex') == 1;

});

alert(store.getAt(index).get('name'));

通过findBy()函数，我们可以同时判断record中的多个字段，在函数中实现复杂逻辑。

我们还可以使用query和queryBy函数对store中的数据进行查询。与find和findBy不同的是，query和queryBy返回的是一个MixCollection对象，里面包含了搜索得到的数据，如下面的代码所示。

alert(store.query('name', 'boy'));

    alert(store.queryBy(function(record) {

        return record.get('name') == 'girl' && record.get('sex') == 1;

    }));

10.4.4　更新store中的数据

可以使用add(Ext.data.Record[] records)向store末尾添加一个或多个record，使用的参数可以是一个record实例，如下面的代码所示。

store.add(new PersonRecord({

    name: 'other',

    sex: 0

}));

Add()的也可以添加一个record数组，如下面的代码所示：

store.add([new PersonRecord({

    name: 'other1',

    sex: 0

}), new PersonRecord({

    name: 'other2',

    sex: 0

})]);

Add()函数每次都会将新数据添加到store的末尾，这就有可能破坏store原有的排序方式。如果希望根据store原来的排序方式将新数据插入到对应的位置，可以使用addSorted()函数。它会在添加新数据之后立即对store进行排序，这样就可以保证store中的数据有序地显示，如下面的代码所示。

store.addSorted(new PersonRecord({

    name: 'lili',

    sex: 1

}));

store会根据排序信息查找这条record应该插入的索引位置，然后根据得到的索引位置插入数据，从而实现对整体进行排序。这个函数需要预先为store设置本地排序，否则会不起作用。

如果希望自己指定数据插入的索引位置，可以使用insert()函数。它的第一个参数表示插入数据的索引位置，可以使用record实例或record实例的数组作为参数，插入之后，后面的数据自动后移，如下面的代码所示。

store.insert(3, new PersonRecord({

    name: 'other',

    sex: 0

}));

store.insert(3, [new PersonRecord({

    name: 'other1',

    sex: 0

}), new PersonRecord({

    name: 'other2',

    sex: 0

})]);

删除操作可以使用remove()和removeAll()函数，它们分别可以删除指定的record和清空整个store中的数据，如下面的代码所示。

store.remove(store.getAt(0));

store.removeAll();

store中没有专门提供修改某一行record的操作，我们需要先从store中获取一个record。对这个record内部数据的修改会直接反映到store上，如下面的代码所示。

store.getAt(0).set('name', 'xxxx');

修改record的内部数据之后有两种选择：执行rejectChanges()撤销所有修改，将修改过的record恢复到原来的状态；执行commitChanges()提交数据修改。在执行撤销和提交操作之前，可以使用getModifiedRecords()获得store中修改过的record数组。

与修改数据相关的参数是pruneModifiedRecords，如果将它设置为true，当每次执行删除或reload操作时，都会清空所有修改。这样，在每次执行删除或reload操作之后，getModifiedRecords()返回的就是一个空数组，否则仍然会得到上次修改过的record记录。

10.4.5　加载及显示数据

store创建好后，需要调用load()函数加载数据，加载成功后才能对store中的数据进行操作。load()调用的完整过程如下面的代码所示。

store.load({

    params: {start:0,limit:20},

    callback: function(records, options, success){

        Ext.Msg.alert('info', '加载完毕');

    },

    scope: store,

    add: true

});

q   params是在store加载时发送的附加参数。

q   callback是加载完毕时执行的回调函数，它包含3个参数：records参数表示获得的数据，options表示执行load()时传递的参数，success表示是否加载成功。

q   Scope用来指定回调函数执行时的作用域。

q   Add为true时，load()得到的数据会添加在原来的store数据的末尾，否则会先清除之前的数据，再将得到的数据添加到store中。

一般来说，为了对store中的数据进行初始化，load()函数只需要执行一次。如果用params参数指定了需要使用的参数，以后再次执行reload()重新加载数据时，store会自动使用上次load()中包含的params参数内容。

如果有一些需要固定传递的参数，也可以使用baseParams参数执行，它是一个JSON对象，里面的数据会作为参数发送给后台处理，如下面的代码所示。

store.baseParams.start = 0;

store.baseParams.limit = 20;

为store加载数据之后，有时不需要把所有数据都显示出来，这时可以使用函数filter和filterBy对store中的数据进行过滤，只显示符合条件的部分，如下面的代码所示。

filter( String field, String/RegExp value, [Boolean anyMatch], 
[Boolean caseSensitive] ) : void

filter()函数的用法与之前谈到的find()相似，如下面的代码所示。

store.filter('name', 'boy');

对应的filterBy()与findBy()类似，也可以在自定义的函数中实现各种复杂判断，如下面的代码所示。

store.filterBy(function(record) {

    return record.get('name') == 'girl' && record.get('sex') == 1;

});

如果想取消过滤并显示所有数据，那么可以调用clearFilter()函数，如下面的代码所示。

store.clearFilter();

如果想知道store上是否设置了过滤器，可以通过isFiltered()函数进行判断。

10.4.6　其他功能

除了上面提到的数据获取、排序、更新、显示等功能外，store还提供了其他一些功能函数。

collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array

collect函数获得指定的dataIndex对应的那一列的数据，当allowNull参数为true时，返回的结果中可能会包含null、undefined或空字符串，否则collect函数会自动将这些空数据过滤掉。当bypassFilter参数为true时，collect的结果不会受查询条件的影响，无论查询条件是什么都会忽略掉，返回的信息是所有的数据，如下面的代码所示。

alert(store.collect('name'));

这样会获得所有name列的值，示例中返回的是包含了'boy'和'girl'的数组。

getTotalCount()用于在翻页时获得后台传递过来的数据总数。如果没有设置翻页，get- TotalCount()的结果与getCount()相同，都是返回当前的数据总数，如下面的代码所示。

alert(store.getTotalCount());

indexOf(Ext.data.Record record)和indexOfId(String id)函数根据record或record的id获得record对应的行号，如下面的代码所示。

alert(store.indexOf(store.getAt(1)));

alert(store.indexOfId(1001));

loadData(object data, [Boolean append])从本地JavaScript变量中读取数据，append为true时，将读取的数据附加到原数据后，否则执行整体更新，如下面的代码所示。

store.loadData(data, true);

Sum(String property, Number start, Number end):Number用于计算某一个列从start到end的总和，如下面的代码所示。

alert(store.sum('sex'));

如果省略参数start和end，就计算全部数据的总和。

store还提供了一系列事件（见表10-1），让我们可以为对应操作设定操作函数。

表10-1　store提供的事件

至此，store和record等组件已经讲解完毕，下面我们主要讨论一下常用的proxy和reader组件。

10.5　常用proxy

10.5.1　MemoryProxy

MemoryProxy只能从JavaScript对象获得数据，可以直接把数组，或JSON和XML格式的数据交给它处理，如下面的代码所示。

var proxy = new Ext.data.MemoryProxy([

    ['id1','name1','descn1'],

    ['id2','name2','descn2']

]);               

10.5.2　HttpProxy

HttpProxy使用HTTP协议，通过Ajax去后台取数据，构造它时需要设置url:'xxx.jsp'参数。这里的url可以替换成任何一个合法的网址，这样HttpProxy才知道去哪里获取数据，如下面的代码所示。

var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});               

后台需要返回EXT所需要的JSON格式的数据，下面的内容就是后台使用JSP的一个范例，如下面的代码所示。

response.setContentType("application/x-json");

Writer out = response.getWriter();

out.print("[" +

        "['id1','name1','descn1']" +

        "['id2','name2','descn2']" +

    "]");               

请注意，这里的HttpProxy不支持跨域，它只能从同一域中获得数据。如果想跨域，请参考下面的ScriptTagProxy。

10.5.3　ScriptTagProxy

ScriptTagProxy的用法几乎和HttpProxy一样，如下面的代码所示。

var proxy = new Ext.data.ScriptTagProxy({url:'xxx.jsp'});               

从这里也看不出来它是如何支持跨域的，我们还需要在后台进行相应的处理，如下面的代码所示。

String cb = request.getParameter("callback");

response.setContentType("text/javascript");

Writer out = response.getWriter();

out.write(cb + "(");

out.print("[" +

        "['id1','name1','descn1']" +

        "['id2','name2','descn2']" +

    "]");

out.write(");");

其中的关键就在于从请求中获得的callback参数，这个参数叫做回调函数。ScriptTag- Proxy会在当前的HTML页面里添加一个<script type="text/javascript"src="xxx.jsp"> </script>标签，然后把后台返回的内容添加到这个标签中，这样就可以解决跨域访问数据的问题。为了让后台返回的内容可以在动态生成的标签中运行，EXT会生成一个名为callback的回调函数，并把回调函数的名称传递给后台，由后台生成callback(data)形式的响应内容，然后返回给前台自动运行。

虽然上述处理过程比较难理解，但是我们只需要了解ScriptTagProxy的用法就足够了。如果还想进一步了解ScriptTagProxy的运行过程，可以使用Firebug查看动态生成的HTML以及响应的JSON内容。

最后我们来分析一下EXT的API文档中提供的示例，这段后台代码会自动判断请求的类型，返回支持ScriptTagProxy或HttpProxy的数据，如代码清单10-2所示。

代码清单10-2　在后台同时支持HttpProxy和ScriptTagProxy

boolean scriptTag = false;

String cb = request.getParameter("callback");

if (cb != null) {

    scriptTag = true;

    response.setContentType("text/javascript");

} else {

    response.setContentType("application/x-json");

}

Writer out = response.getWriter();

if (scriptTag) {

    out.write(cb + "(");

}

out.print(dataBlock.toJsonString());

if (scriptTag) {

    out.write(");");

}               

代码中通过判断请求中是否包含callback参数来决定返回何种数据类型。如果包含，就返回ScriptTagProxy需要的数据；否则，就当作HttpProxy处理。

10.6　常用Reader

10.6.1　ArrayReader

从proxy中读取的数据需要进行解析，这些数据转换成Record数组后才能提供给Ext.data. Store使用。

ArrayReader的作用是从二维数组里依次读取数据，然后生成对应的Record。默认情况下是按列顺序读取数组中的数据，不过你也可以考虑用mapping指定record与原始数组对应的列号。ArrayReader的用法很简单，但缺点是不支持分页。使用二维数组的方式如下面的代码所示。

var data = [

    ['id1','name1','descn1'],

    ['id2','name2','descn2']

];

对应的ArrayReader如下面的代码所示。

var reader = new Ext.data.ArrayReader({

    id:1

},[

    {name:'name',mapping:1},

    {name:'descn',mapping:2},

    {name:'id',mapping:0},

]);

我们演示的是字段顺序不一致的情况，如果字段顺序和列顺序一致，就不用额外配置mapping。

10.6.2　JsonReader

在JavaScript中，JSON是一种非常重要的数据格式，key:value的形式比XML那种复杂的标签结构更容易理解，代码量也更小，很多人倾向于使用它作为EXT的数据交换格式。为Json- Reader准备的JSON数据如下面的代码所示。

var data = {

    id:0,

    totalProperty:2,

    successProperty:true,

    root:[

        {id:'id1',name:'name1',descn:'descn1'},

        {id:'id2',name:'name2',descn:'descn2'}

    ]

};

与数组相比，JSON的最大优点就是支持分页，我们可以使用totalProperty参数表示数据的总量。successProperty参数是可选的，可以用它判断当前请求是否执行成功，进而判断是否进行数据加载。在不希望JsonReader处理响应数据时，可以把successProperty设置成false。

现在来讨论一下JsonReader，看看它是如何与上面的JSON数据对应的，如下面的代码所示。

var reader = new Ext.data.JsonReader({

    successProperty: "successproperty",

    totalProperty: "totalProperty",

    root: "root",

    id: "id"

}, [

    {name:'id',mapping:'id'},

    {name:'name',mapping:'name'},

    {name:'descn',mapping:'descn'}

]);

上例中的对应方式不够简洁，因为name和mapping部分的内容是相同的，其实这里的mapping可以省略，默认会用name参数从JSON中获得对应的数据。如果不想与JSON里的名字一样，也可以使用mapping修改。不过，mapping在这里还有其他用途，如代码清单10-3所示。

代码清单10-3　为JsonReader设置mapping进行数据映射

var data = {

    id:0,

    totalProperty:2,

    successProperty:true,

    root:[

        {id:'id1',name:'name1',descn:'descn1',person:{

            id:1,name:'man',sex:'male'

        }},

        {id:'id2',name:'name2',descn:'descn2',person:{

            id:2,name:'woman',sex:'female'

        }}

    ]

};

var reader = new Ext.data.JsonReader({

    successProperty: "successproperty",

    totalProperty: "totalProperty",

    root: "root",

    id: "id"

}, [

    'id','name','descn',

    {name:'person_name',mapping:'person.name'},

    {name:'person_sex',mapping:'person.sex'}

]);

在上面的代码中，我们使用JSON支持更复杂的嵌套结构，其中的person对象自身就拥有id、 name和sex等属性。在JsonReader中可以用mapping把这些嵌套的内部属性映射出来，赋予对应的record，而其他字段都不变。

10.6.3　XmlReader

XML是非常通用的数据传输格式，XmlReader使用的XML格式的数据如代码清单10-4所示。

代码清单10-4　XmlReader使用的XML格式的数据

<?xml version="1.0" encoding="utf-8"?>

<dataset>

    <id>1</id>

    <totalRecords>2</totalRecords>

    <success>true</success>

    <record>

        <id>1</id>

        <name>name1</name>

        <descn>descn1</descn>

    </record>

    <record>

        <id>2</id>

        <name>name2</name>

        <descn>descn2</descn>

    </record>

</dataset>

这里一定要用dataset作为XML根元素。再让我们看一下如何对XmlReader进行配置，从而读取上面示例中的XML数据，如下面的代码所示。

var reader = new Ext.data.XmlReader({

   totalRecords: 'totalRecords',

   success: 'success'

   record: 'record',

   id: "id"

}, ['id','name','descn']);               

XmlReader使用的参数与之前介绍的JsonReader有些不同，我们可以看到这里用到了totalRecords和record两个参数，其中totalRecords用来指定从’totalRecords’标签里获得后台数据总数，record则表示XML中放在record标签里的数据是我们需要显示的结果数据。其他两个参数success和id的含义和JsonReader中对应的参数相似，分别用来判断操是否成功和这次返回的id。因为XML中的标签和reader里需要的名字是相同的，所以简化了配置，将[{name:’id’},{name:’name’},{name:’descn’}]直接写成了[‘id’,’name’,’descn’]。

因为XmlReader不能将JavaScript中的字符串自动解析成XML格式的数据，因此我们需要利用其他方法进行演示。参考localXHR.js中构造XML的方式，我们有了下面的解决方案，如代码清单10-5所示。

代码清单10-5　通过本地字符串构造XML对象

var data = "<?xml version='1.0' encoding='utf-8'?>" +

    "<dataset>" +

        "<id>1</id>" +

        "<totalRecords>2</totalRecords>" +

        "<success>true</success>" +

        "<record>" +

            "<id>1</id>" +

            "<name>name1</name>" +

            "<descn>descn1</descn>" +

        "</record>" +

        "<record>" +

            "<id>2</id>" +

            "<name>name2</name>" +

            "<descn>descn2</descn>" +

        "</record>" +

    "</dataset>";

var xdoc;

if(typeof(DOMParser) == 'undefined'){

    xdoc = new ActiveXObject("Microsoft.XMLDOM");

    xdoc.async="false";

    xdoc.loadXML(data);

}else{

    var domParser = new DOMParser();

    xdoc = domParser.parseFromString(data, 'application/xml');

    domParser = null;

}

var proxy = new Ext.data.MemoryProxy(xdoc);

var reader = new Ext.data.XmlReader({

    totalRecords: 'totalRecords',

    success: 'success',

    record: 'record',

    id: "id"

}, ['id','name','descn']);

var ds = new Ext.data.Store({

    proxy: proxy,

    reader: reader

});

10.7　高级store

实际开发时，并不需要每次都对proxy、reader、store这三个对象进行配置，EXT为我们提供了几种可选择的整合方案。

q   SimpleStore = Store + MemoryProxy + ArrayReader

  var ds = Ext.data.SimpleStore({

      data: [

            ['id1','name1','descn1'],

            ['id2','name2','descn2']

      ],

      fields: ['id','name','descn']

  });

SimpleStore是专为简化读取本地数组而设计的，设置上MemoryProxy需要的data和ArrayReader需要的fields就可以使用了。

q   JsonStore = Store + HttpProxy + JsonReader

  var ds = Ext.data.JsonStore({

      url: 'xxx.jsp',

      root: 'root',

      fields: ['id','name','descn']

  });

JsonStore将JsonReader和HttpProxy整合在一起，提供了一种从后台读取JSON信息的简便方法，大多数情况下可以考虑直接使用它从后台读取数据。

q   Ext.data.GroupingStore对数据进行分组

Ext.data.GroupingStore继承自Ext.data.Store，它的主要功能是可以对内部的数据进行分组，我们可以在创建Ext.data.GroupingStore时指定根据某个字段进行分组，也可以在创建实例后调用它的groupBy()函数对内部数据重新分组，如下面的代码所示。

    var ds = new Ext.data.GroupingStore({

        data: [

            ['id1','name1','female','descn1'],

            ['id2','name2','male','descn2'],

            ['id3','name3','female','descn3'],

            ['id4','name4','male','descn4'],

            ['id5','name5','female','descn5']

        ],

        reader: new Ext.data.ArrayReader({

            fields: ['id','name','sex','descn']

        }),

        groupField: 'sex',

        groupOnSort: true

    });

上例中，我们使用groupField作为参数，为Ext.data.Grouping设置了分组字段，另外还设置了groupOnSort参数，这个参数可以保证只有在进行分组时才会对Ext.data.Grouping- Store内部的数据进行排序。如果采用默认值，就需要手工指定sortInfo参数，从而指定默认的排序字段和排序方式，否则就会出现错误。

创建Ext.data.GroupingStore的实例之后，我们还可以调用groupBy()函数重新对数据进行分组。因为我们设置了groupOnSort:true，所以在重新分组时，EXT会使用分组的字段对内部数据进行排序。如果不希望对数据进行分组，也可以调用clearGrouping()函数清除分组信息，如下面的代码所示。

    ds.groupBy('id');

    ds.clearGrouping();

10.8　EXT中的Ajax

EXT与后台交换数据时，很大程度上依赖于底层实现的Ajax。所谓底层实现，就是说很可能就是我们之前提到的 Prototype、jQuery或YUI中提供的Ajax功能。为了统一接口，EXT在它们的基础上进行了封装，让我们可以用同一种写法“游走”于各种不同的底层实现之间。

10.8.1　最容易看到的Ext.Ajax

Ext.Ajax的基本用法如下所示。

Ext.Ajax.request({

    url: '07-01.txt',

    success: function(response) {

        Ext.Msg.alert('成功', response.responseText);

    },

    failure: function(response) {

        Ext.Msg.alert('失败', response.responseText);

    },

    params: { name: 'value' }

});

这里调用的是Ext.Ajax的request函数，它的参数是一个JSON对象，具体如下所示。

q   url参数表示将要访问的后台网址。

q   success参数表示响应成功后的回调函数。

上例中我们直接从response取得返回的字符串，用Ext.Msg.alert显示出来。

q   failure参数表示响应失败后的回调函数。

注意，这里的响应失败并不是指数据库操作之类的业务性失败，而是指HTTP返回404或500错误，请不要把HTTP响应错误与业务错误混淆在一起。

q   params参数表示请求时发送到后台的参数，既可以使用JSON对象，也可以直接使用"name=value"形式的字符串。

上面的示例可以在10.store/07-01.html中找到。

Ext.Ajax直接继承自Ext.data.Connection，不同的是，它是一个单例，不需要用new创建实例，可以直接使用。在使用Ext.data.Connection前需要先创建实例，因为Ext.data. Connection是为了给Ext.data中的各种proxy提供Ajax功能，分配不同的实例更有利于分别管理。Ext.Ajax为用户提供了一个简易的调用接口，实际使用时，可以根据自己的需要进行选择。

10.8.2　Ext.lib.Ajax是更底层的封装

其实Ext.Ajax和Ext.data.Connection的内部功能实现都是依靠Ext.lib.Ajax来完成的，在Ext.lib.Ajax下面就是各种底层库的Ajax了。

如果使用Ext.lib.Ajax实现以上的功能，就需要写成下面的形式，如下面的代码所示。

Ext.lib.Ajax.request(

    'POST',

    '07-01txt',

    {success: function(response){

        Ext.Msg.alert('成功', response.responseText);

    },failure: function(){

        Ext.Msg.alert('失败', response.responseText);

    }},

    'data=' + encodeURIComponent(Ext.encode({name:'value'}))

);

我们可以看到，使用Ext.lib.Ajax时需要传递4个参数，分别为method、url、callback和params。它们的含义与Ext.Ajax中的参数都是一一对应的，唯一没有提到过的method参数表示请求HTTP的方法，它也可以在Ext.Ajax中使用method:'POST'的方式设置。

相对于Ext.Ajax来说，Ext.lib.Ajax有如下几个缺点。

q   参数的顺序被定死了，第一个参数是method，第二个参数是url，第三个参数是回调函数callback，第四个参数是params。这样既不容易记忆，也无法省略其中某个不需要的参数。Ext.Ajax中用JSON对象来定义参数，使用起来更灵活。

q   在params部分，Ext.lib.Ajax必须使用字符串形式，显得有些笨重。Ext.Ajax则可以在JSON对象和字符串之间随意选择，非常灵活。

比与Ext.Ajax相比，Ext.lib.Ajax的唯一优势就是它可以在EXT 1.x中使用。如果你使用的是EXT 2.0或更高的版本，那么就放心大胆地使用Ext.Ajax吧，它会带给你更多的惊喜。

该示例在10.store/07-02.html中。

10.9　关于scope和createDelegate()

关于JavaScript中this的使用，这是一个由来已久的问题了。我们这里就不介绍它的发展历史了，只结合具体的例子，告诉大家可能会遇到什么问题，在遇到这些问题时EXT是如何解决的。在使用EXT时，最常碰到的就是使用Ajax回调函数时出现的问题，如下面的代码所示。

<input type="text" name="text" id="text">

<input type="button" name="button" id="button" value="button">

现在的HTML 页面中有一个text输入框和一个按钮。我们希望按下这个按钮之后，能用Ajax去后台读取数据，然后把后台响应的数据放到text中，实现过程如代码清单10-6所示。

代码清单10-6　Ajax中使用回调函数

function doSuccess(response) {

    text.dom.value = response.responseText;

}

Ext.onReady(function(){

    Ext.get('button').on('click', function(){

        var text = Ext.get('text');

        Ext.lib.Ajax.request(

            'POST',

            '08.txt',

            {success:doSuccess},

            'param=' + encodeURIComponent(text.dom.value)

        );

    });

});

在上面的代码中，Ajax已经用Ext.get('text')获得了text，以为后面可以直接使用，没想到回调函数success不会按照你写的顺序去执行。当然，也不会像你所想的那样使用局部变量text。实际上，如果什么都不做，仅仅只是使用回调函数，你不得不再次使用Ext.get('text')重新获得元素，否则浏览器就会报text未定义的错误。

在此使用Ext.get('text')重新获取对象还比较简单，在有些情况下不容易获得需要处理的对象，我们要在发送Ajax请求之前获取回调函数中需要操作的对象，有两种方法可供选择：scope和createDelegate。

q   为Ajax设置scope。

  function doSuccess(response) {

      this.dom.value = response.responseText;

  }

  Ext.lib.Ajax.request(

      'POST',

      '08.txt',

      {success:doSuccess,scope:text},

      'param=' + encodeURIComponent(text.dom.value)

  );               

在Ajax的callback参数部分添加一个scope:text，把回调函数的scope指向text，它的作用就是把doSuccess函数里的this指向text对象。然后再把doSuccess里改成this.dom. value，这样就可以了。如果想再次在回调函数里用某个对象，必须配上scope，这样就能在回调函数中使用this对它进行操作了。

q   为success添加createDelegate()。

  function doSuccess(response) {

      this.dom.value = response.responseText;

  }

  Ext.lib.Ajax.request(

      'POST',

      '08.txt',

      {success:doSuccess.createDelegate(text)},