- 浏览: 643176 次
- 性别:
- 来自: 合肥
-
文章分类
最新评论
-
nehaoww:
754588141@qq.com,源码可以给一份吗
Struts/JSP可上传、预览服务器端文件(图片、文件、Flash、多媒体)文件组件 -
zzd_md:
把XmlTreeLoader.js 这个文件的路径改一下就好了 ...
ExtJs 实现的后台管理框架 -
llixinrui_strive:
EXT之form.load(转) -
liangzhang0929:
部门管理和用户管理的url怎么显示#,没法打开dept_lis ...
Extjs3.x Struts2 -Json-plugin学习实例 -首页框架代码 05 -
datouren:
您好想问你一下 为什么只显示根节点 其它节点不显示 目前是在一 ...
ExtJs加载本地txt格式的数据
Ext是一个非常好的Ajax框架,其华丽的外观表现确实令我们折服,然而一个应用始终离开不服务器端,因此在实现开发中我们需要对Ext与服务器端的交互技术有较为详细的了解,在开发中才能游刃有余地应用。本文对Ext应用中与服务器交互的常用方法作具体的介绍,本文的内容大部份来源于《ExtJS实用开发指南》。
总体来说,Ext与服务器端的交互应用可以归结为三种类型,包含表单FormPanel的处理(提交、加载)、控件交互及用户发起的Ajax请求等三种。
一、表单提交(submit)及加载(load)
这里说的表单是指用Ext的FormPanel建立的表单,看下面的例子:
Ext.onReady(function(){ var f=new Ext.form.FormPanel({ renderTo:"hello", title:"用户信息录入框", height:200, width:300, labelWidth:60, labelAlign:"right", frame:true, defaults:...{xtype:"textfield",width:180}, items:[ {name:"username",fieldLabel:"姓名"}, {name:"password",fieldLabel:"密码",inputType:"password"}, {name:"email",fieldLabel:"电子邮件"}, {xtype:"textarea",name:"intro",fieldLabel:"简介"} ], buttons:[...{text:"提交"},...{text:"取消"}] }) });
![](/upload/attachment/137459/2d2895ce-4d5d-3758-b0c8-68788725859e.jpg)
要提交该表单,则可以直接调用FormPanel下面form对象的submit方法即可,代码如下:
f.form.submit({ url:"server.js", waitTitle:"请稍候", waitMsg:"正在提交表单数据,请稍候。。。。。。" });
调用submit方法后,默认情况下服务器端应用程序需要返回一个JSON数据对象,该对象包含两个属性,success的值是布尔值true或false,如果success的值为true,则表示服务器端处理成功,否则表示失败;而errors的值是一个对象,对象中的每一个属性表示错误的字段名称,而属性值为错误描述。
比如,如果我们有服务器端验证,下面的返回结果表示当表单提交处理出错时给客户端返回的数据。
server.js文件中的内容如下:
{ success: false, errors: { username: "姓名不能为空", times: "迟到次数必须为数字!" } }
结果如图所示:
![](/upload/attachment/137471/59e14bc2-5bd4-3f6f-badd-bccde4f4e414.jpg)
当然,如果success属性值改为true,则表示服务器端的处理成功,此时可以在success定义的回调函数中作相应的处理,比如下面的代码表示在表单处理成功后,弹出提示信息,代码如下:
f.form.submit({ waitTitle:"请稍候", waitMsg:"正在提交表单数据,请稍候。。。。。。", url:" server.js", method:"POST", success:function(action,form){ alert("提交成功!"); })
另外一种表单动作是表单中数据的加载。要给表单中的字段设置值,可以通过调用字段的setValue方法,也可以直接在初始化字段的时候在配置参数中设置value属性值,另外还有一种方法是通过Ajax的方式从服务器端加载表单中各个字段的值。这种方式也就是我们这里要介绍的表单数据加载。
ExtJS的表单数据加载通过BasicForm的load方法来进行,表单数据加载动作由类Ext.form.Action.Load定义,执行数据加载动作会到服务器端加载数据,默认情况下服务器端需要返回一个包含success属性及data属性的JSON对象,内容大致如下:
{ success: true, data: { username: "冷雨", times: 1 } }
下面我们看一个使用到表单数据加载的简单示例代码:
Ext.QuickTips.init(); Ext.onReady(function(){ var f=new Ext.form.FormPanel({ renderTo:"hello", title:"用户信息录入框", height:130, width:320, labelWidth:60, labelAlign:"right", frame:true, defaults:{width:180,xtype:"textfield"}, items:[{ xtype:"textfield", name:"username", fieldLabel:"姓名" }, { xtype:"textfield", name:"times", fieldLabel:"登录次数" } ], buttons:[{text:"加载表单数据",handler:s}] }); function s(){ f.form.load({ waitTitle:"请稍候", waitMsg:"正在加载表单数据,请稍候。。。。。。", url:"data.js", success:function(action,form){ alert("加载成功!"); }, failure:function(action,form){ alert("数据加载失败!"); } }); } });
服务器data.js中的内容为:
{ success: true, data: { username: "冷雨", times: 100 } }
当点击“加载表单数据”按钮的时候,会执行f这个函数,f函数中直接调用f.form.load({})来加载表单中的数据,load方法中的参数与submit方法类似。执行上面的代码,在从服务器端成功加载数据后,会自动把加载的数据设置到表单对应的各个字段中,然后还会执行success指定的回调函数,如图
![](/upload/attachment/137473/48eec1e0-56e7-3a4a-8191-8df578157c18.jpg)
二、控件的交互
一些需要从服务器加载数据的控件会自动与服务器交互,比如TreePanel下面的TreeLoader、GridPanel里面用到的Store等。这些控件其实都可以加载各种类型的数据,也就是理论上服务器可以返回任意数据给Ext客户端,然后由Ext客户端转化成这些控件可以识别的数据。这些控件都提供了默认的数据解析器,能解析固定格式的数据供这些控件使用,在使用这些控件的时候,我们需要仔细看这些控件的API,看他们具体能处理什么样格式的数据,这样就可以在服务器端返回其默认的数据格式即可。
下面,我们来看TreePanel,这是Ext中用来显示树结构的控件,该控件可以通过一个url来加载树的节点信息,并支持异步树节点加载方式。看下面使用TreePanel的代码:
var root=new Ext.tree.AsyncTreeNode({ id:"root", text:"树的根"}); var tree=new Ext.tree.TreePanel({ renderTo:"hello", root:root, loader: new Ext.tree.TreeLoader({url:"treedata.js"}), width:100 });
在代码中,treedate.js表示服务器的程序,Ext在渲染这棵树,需要加载树节点的时候会向服务器发起一个请求,通过这个请求的返回结果来加载树的节点信息。默认情况下Ext要求服务器端返回的是一个包含树节点信息的JSON数组,格式如下:
[{节点对象1},{节点对象2}]
比如treedata.js中可以包含下面的数据:
[{ id: 1, text: ''子节点1'', leaf: true },{ id: 2, text: ''儿子节点2'', children: [{ id: 3, text: ''孙子节点'', leaf: true }] }]
下面是树的显示结果:
![](/upload/attachment/137475/9629ade5-b5b5-3ed9-b781-01246dc90e35.jpg)
再比如GridPanel,用于显示表格数据,GridPanel控件使用Store来存放表格中的数据,而Ext中的Store通过DataReader来解析数据,不同的DataReader可以解析不同的数据,因此在使用表格的时候,根据客户端使用的DataReader不同,服务器端需要返回相应格式的数据。假如我们使用XmlReader,Store的定义如下:
var store=new Ext.data.Store({ url:"hello.xml", reader:new Ext.data.XmlReader({ record:"row"}, ["id","name","organization","homepage"]) });
使用该store的表格代码如下:
Ext.onReady(function(){ var store=new Ext.data.Store({ url:"hello.xml", reader:new Ext.data.XmlReader({ record:"row"}, ["id","name","organization","homepage"]) }); var colM=new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true}, {header:"开发团队",dataIndex:"organization",sortable:true}, {header:"网址",dataIndex:"homepage" }]); var grid = new Ext.grid.GridPanel({ renderTo:"hello", title:"中国Java开源产品及团队", height:200, width:600, cm:colM, store:store, autoExpandColumn:2 }); store.load(); });
这里要求服务器端返回类似下面的xml数据:
<?xml version="1.0" encoding="UTF-8"?> <dataset> <row> <id>1</id> <name>EasyJWeb</name> <organization>EasyJF</organization> <homepage>www.easyjf.com</homepage> </row> <row> <id>2</id> <name>jfox</name> <organization>huihoo</organization> <homepage>www.huihoo.org</homepage> </row> <row> <id>3</id> <name>jdon</name> <organization>jdon</organization> <homepage>www.jdon.com</homepage> </row> <row> <id>4</id> <name>springside</name> <organization>springside</organization> <homepage>www.springside.org.cn</homepage> </row> </dataset>
三、 Ext.Ajax.request方法
其实,不管是FormPanel的处理,还是控件的交互,他们在访问服务器端的时候,90%都是通过使用Ext.Ajax.request方法来进行的,该方法可以用来向服务器端发送一个http请求,并可以在回调函数中处理返回的结果。往远程服务器发送一个HTTP请求,发送Ajax调用的时候该方法的签名如下:
Ext.Ajax.rquest( [Object options] ) : Number
服务器的响应是异步的,因此需要在回调函数中处理服务器端返回的数据。回调函数可以定义在request方法调用的参数options中。另外,在request方法中可以定义Ajax请求的一些其它属性。参数options是一个对象,该对象包含了Ajax请求所需的各种参数及回调处理参数等。options中可以包含的各个属性及含义如下所示:
url String 指定要请求的服务器端url,默认值为Ajax对象中配置的URL参数值。
params Object/String/Function 指定要传递的参数,可以是一个包含参数名称及值的对象,也可以是name=xx&birthday=1978-1-1类似的url编码字符串,或者是一个能返回上述两种内容的函数。
method String 指定发送Ajax请求使用的method,可以是GET或POST方式。默认情况下,如果请求中没有传递任何参数则使用GET,否则使用POST。
callback Function 指定Ajax请求的回调函数,该函数不管是调用成功或失败,都会执行。传递给回调函数的参数有三个,第一个options表示执行request方法时的参数,第二个success表示请求是否成功,第三个参数response表示用来执行Ajax请求的XMLHttpRequest 对象。关于XMLHttpRequest可以通过http://www.w3.org/TR/XMLHttpRequest/查询详细的信息。
success Function 指定当Ajax请求执行成功后执行的回调函数,传递给回调函数两个参数,第一个参数response表示执行Ajax请求的XMLHttpRequet对象,第二个参数表示执行request方法时的options对象。
failure Function 指定当请求出现错误时执行的回调函数,传递给回调函数两个参数,第一个参数response表示执行Ajax请求的XMLHttpRequet对象,第二个参数表示执行request方法时的options对象。
scope Object 指定回调函数的作用域,默认为浏览器window。
form Object/String 指定要提交的表单id或表单数据对象。
isUpload Boolean 指定要提交的表单是否是文件上传表单,默认情况下会自动检查。
headers Object 指定请求的Header信息。
xmlData Object 指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。
jsonData Object/String 指定需要发送给服务器端的JSON数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。
disableCaching Boolean 是否禁止cache。
比如,下面是一个向服务器foo.ejf这个应用程序发起一个Ajax请求的应用示例程序:
function successFn(response,options){ alert(''请求成功了''); } function failureFn(response,options){ alert(''请求失败了''); } Ext.Ajax.request({ url: ''foo.ejf'', success: successFn, failure: failureFn, params: { foo: ''bar'' } });
这里的回调函数返回中返回的参数是一个XHR(即XmlHttpRequest)对象,我们可以通过该对象的responseText或responseXML等属性来得到从服务器端返回的数据信息。在Ajax应用中,我们经常会让服务器端返回JSON数据,由于JSON数据是字符串,因此在程序中需要先把他解析成javascript对象才可以使用,把JSON数据解析成javascript对象可以直接使用Ext.decode方法。
假如服务器返回的是下面的JSON数据对象:
{ username: "冷雨", times: 1 }
则回调函数中应用这样来使用该对象:
function successFn(response,options){ var obj= Ext.decode(response.responseText) ; alert(obj.username); }
Ext.Ajax.request是Ext与服务器端交互的核心,因此需要在应用中灵活使用
发表评论
-
Ext Form全攻略1
2010-10-24 10:51 22121 Form概述Formpanel是一个重要的页面组件,在具体 ... -
form.load()加载后,怎么得到服务端返回的JSON数据?-转至 一起Ext
2010-10-23 10:36 5301Ext.Ajax.request({ ur ... -
EXT之form.load(转)
2010-10-23 10:32 4615大家看下面的简单例子,如果我们要实现一个从后台读取对应数据 ... -
Ext 3.0 - 中文API文档 (完整的chm版本) 2009年5月由JS堂翻译小组完成
2009-12-14 16:37 5159大家可以下载了,我也是在网上下载的,出来和大家分享 此贴中 ... -
ExtJs 实现的后台管理框架
2009-12-14 16:21 12378由ExtJs实现的后台管理框架, 你只要添加你左边的树型数据 ... -
ExtJs加载本地xml格式的数据
2009-12-12 16:24 5255<script type="text/jav ... -
ExtJs加载本地txt格式的数据
2009-12-12 10:56 2809/** * 动态加载本地txt格式的数据 */ ... -
ExtJs加载JSON格式树
2009-12-12 10:41 12749html文件中加入 <script src=" ... -
ExtJs生成静态树
2009-12-12 09:40 5006类Ext.tree.TreePanel 包: ... -
ExtJS笔记--Ext.form.FormPanel(四)综合实例
2009-09-12 19:11 13518//表单开始----------------------- ... -
ExtJS笔记--Ext.form.FormPanel(三)
2009-09-12 19:08 36801、afterlayout( Ext.Container ... -
ExtJS笔记--Ext.form.FormPanel(二)
2009-09-12 19:04 72221、layout : String 此容器所使用 ... -
ExtJS笔记--Ext.form.FormPanel(一)
2009-09-12 18:59 10792Ext.form.FormPanel 类全称: ... -
ExtJS笔记--Ext.form.FieldSet
2009-09-12 18:57 8952Ext.form.FieldSet 类全称: Ext.for ... -
ExtJS笔记--Ext.form.Field
2009-09-12 18:55 9776Ext.form.Field 类全称: Ext.form.F ... -
ExtJS笔记--Ext.form.DateField
2009-09-11 13:14 12660Ext.form.DateField 类全称: Ex ... -
ExtJS笔记--Ext.form.ComboBox
2009-09-11 07:00 8106Ext.form.ComboBox 类全称: Ex ... -
ExtJS笔记--Ext.form.Checkbox
2009-09-11 06:58 6590Ext.form.Checkbox 类全称: Ext.f ... -
ExtJS笔记--Ext.data详解
2009-09-11 06:56 7798Ext.data Ext.data在命名空间中定义了一系 ... -
ExtJS笔记--Ext..Button组件
2009-09-11 06:52 12548Ext..Button组件 例: Ext.Quick ...
相关推荐
本人收集的EXT详解,EXT开发中组件详解
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
Ext API详解 Ext API详解 Ext API详解
Ext与后台服务器的交互操作
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
EXT核心API详解 EXT核心API详解 EXT核心API详解
ext_js 入门详解 让您轻松学会ext_js框架,开发绚烂的界面
整理的Ext API详解 .rar 整理的Ext API详解 .rar
EXT核心API详解(第一部分)EXT核心API详解(第一部分)
ext 与数据库交互实例 ext 与数据库交互实例 ext 与数据库交互实例
ext.net GridView 实例详解 做ext开发用的最多的控件 详细分析其使用方法。包括前台,后台代码
EXT 详解 包括EXT手册 EXT API详解 EXT工程包 EXT demo 。 EXT 2.0 EXT核心API
EXT 组件详解EXT 组件详解EXT 组件详解
Ext ExtJs API详解 Ext API详解--笔记
Ext2 核心 API 中文详解 Ext2 核心 API 中文详解 Ext2 核心 API 中文详解 Ext2 核心 API 中文详解 Ext2 核心 API 中文详解Ext2 核心 API 中文详解Ext2 核心 API 中文详解Ext2 核心 API 中文详解Ext2 核心 API 中文...
经典Ext常用方法详解,帮助你攻克Ext难题。