冷雨在线
EasyJWEB,JavaScript,Spring,JPA,MySql
半路出家,现在混JAVA.
我的首页
文章
相册
圈子
留言
管理
 
    当前所在页面:首页>>文章>>《ExtJS2.0实用简明教程》之与服务器交互
《ExtJS2.0实用简明教程》之与服务器交互
    作者:小雨 来源: 发表时间:2008-02-17

 
 

《ExtJS实用开发指南》印刷版3月10号推出,赶快去看看吧。 

        在实际的应用中,表格中的数据一般都是直接存放在数据库表或服务器的文件中。因此,在使用表格控件的时候经常需要与服务器进行交互。ExtJS使用Ajax方式提供了一套与服务器交互的机制,也就是可以不用刷新页面,就可以访问服务器的程序进行数据读取或数据保存等操作。
        比如前面在表格中显示xml文档中数据的例子中,就是一个非常简单的从服务器端读取数据的例子,再回顾一下代码:

var store=new Ext.data.Store({

url:"hello.xml", 

reader:new Ext.data.XmlReader({

record:"row"},

["id","name","organization","homepage"])

});

        因为Sote组件接受一个参数url,如果设置url,则ExtJS会创建一个与服务器交互的Ext.data.HttpProxy对象,该对象通过指定的Connection或Ext.Ajax.request来向服务端发送请求,从而可以读取到服务器端的数据。
        经验表明,服务器端产生JSon数据是一种非常不错的选择,也就是说假如服务器的url“student.ejf?cmd=list”产生下面的JSON数据输出:

{results:[{id:1,

name:'小王',

email:'xiaowang@easyjf.com',

sex:'男',

bornDate:'1991-4-4'},

{id:1,

name:'小李',

email:'xiaoli@easyjf.com',

sex:'男',

bornDate:'1992-5-6'},

{id:1,

name:'小兰',

email:'xiaoxiao@easyjf.com',

sex:'女',

bornDate:'1993-3-7'} 

]

}

        则前面显示学习信息编辑表格的store可以创建成下面的形式:

var store=new Ext.data.Store({

url:"student.ejf?cmd=list", 

reader:new Ext.data.JsonReader({

root:"result"},

["id","name","organization","homepage"])

}); 

或者:

var store=new Ext.data.JsonStore({

url:"student.ejf?cmd=list", 

root:"result",

fields:["id","name","organization","homepage"]});

        其中root表示包含记录集数据的属性。
        如果在运行程序中需要给服务器端发送数据的时候,此时可以直接使用ExtJS中提供的Ext.Ajax对象的request方法。比如下面的代码实现放服务器的student.ejf?cmd=save这个url发起一个请求,并在params中指定发送的Student对象:

function sFn()

{

alert('保存成功');

}

function fFn()

{

alert('保存失败');

}

Ext.Ajax.request({

   url: 'student.ejf?cmd=save’

   success: sFn

   failure: fFn,

   params: { name: '小李',email: ' xiaoli@easyjf.com',bornDate: ' 1992-5-6',sex: '男'}

});

        关于ExtJS中各控件与服务器端如何交互、Ext.Ajax的详细使用说明等请参考wlr.easyjf.com中的VIP文档《ExtJS中客户端控件与服务器控件交互详解》。

(版权声明:本人Blog上的所有文章版本均归EasyJF开源的冷雨所有,受法律保护,可以在互联网上进行转载,转载必须保留作者版权声明及链接;未经本人书面许可,不得把本人Blog上的文章用于出版、发行或其它商业用途。)

上一篇:可编辑表格EditorGridPanel

 
 

(阅读 )   评论数(:28)
评论】 【收藏】
评论:共28条
请问,如下取得一个store对象之后, var store=new Ext.data.JsonStore({ url:"student.ejf?cmd=list", root:"result", fields:["id","name","organization","homepage"]}); 如果不应用于grid中,我如何才能取得store中的数据?
评论人: realsmy     评论时间: 2008-02-19 08:38:28
关于这个问题,请看数据存储一章中的介绍。
评论人: 冷雨     评论时间: 2008-02-20 18:42:37
关于ExtJS中各控件与服务器端如何交互、Ext.Ajax的详细使用说明等请参考wlr.easyjf.com中的VIP文档《ExtJS中客户端控件与服务器控件交互详解》。 这个如何得到呢?
评论人: kooyeed    评论时间: 2008-02-21 12:50:46
这就完了吗?
评论人: 青峰网络     评论时间: 2008-04-01 10:24:35
很好很通俗,,,辛苦了。。。
评论人: LeoChou     评论时间: 2008-04-11 12:38:16
辛苦了,谢谢。。。
评论人: 金总     评论时间: 2008-04-22 00:46:44
确实很好 就是有点意犹未尽
评论人: 很好     评论时间: 2008-05-12 09:20:52
确实不错!!
顶!
评论人: xwm1222     评论时间: 2008-05-16 13:53:30
我试了一下,除了要读文件中数据到表格的,其他的全能运行,奇怪了,只要是有HttpProxy 相关的,全不能用,为什么?我看了EXTJS里的sample,里面的也一样不能运行,还有API运行报错,为什么? fishlikegame@tom.com
评论人: fish     评论时间: 2008-05-26 19:16:40
editgrid aftereidt能讲详细点么?
评论人: e     评论时间: 2008-06-05 14:53:13
我就是按照你的写,为什么总是报Ext not find 的错误啊。
我是刚接触Ext,有好多的不懂。
评论人: 123     评论时间: 2008-06-17 18:09:11
确实意犹未尽~ 辛苦了
评论人: xiaodoutiao     评论时间: 2008-07-18 13:16:34
报错是因为你没有导入相应的.js文件,或者是像ext-core.js这些JS文件的路径有误。
评论人: qq472291583     评论时间: 2008-07-23 17:27:08
sd
评论人: 匿名用户     评论时间: 2008-09-18 16:40:40
Ajax部分貌似应该放到网页服务器环境下调试吧?


------------
王小弟到此一游
评论人: 某男     评论时间: 2008-12-20 01:18:16
很好,很精辟!

谢谢本教程的作者(们)!

-------------
同志们辛苦了!
评论人: 某男     评论时间: 2008-12-20 01:20:11
非常谢谢,看了这片文章我的问题马上解决了
评论人: 匿名用户     评论时间: 2008-12-23 13:47:48
so sweet!!!
评论人: Xjh     评论时间: 2009-03-03 10:54:20
吗的  开源的东西 到你这来就收费了,还VIP文档,你就全给大家讲了,大家怎么能不说你好啊?打着开源的旗号唬人啊? 你真是神兽:草泥马
评论人: 只看该作者     评论时间: 2009-03-26 18:18:00
前台是这样写,那后台是不是得是一个二维数组的形式啊?数据不需要放到request中吗?数据返回回来后能自动加到表格中吗?
评论人: Jack     评论时间: 2009-05-19 10:14:14
好!!好好!!好好好!!!

精辟!!!!!
           屁精!!!!!

呵呵,开个玩笑。。。。。。。。
     辛苦了!!!!


-----------勇哥到此一游!!!!鼓掌!!!--------
评论人: raozhiyong     评论时间: 2009-07-21 16:18:13
哎,现在的BLOG呀,真是无语ING,天下文章一大抄...
评论人: jjj     评论时间: 2009-09-19 19:49:51
评论人: xiaolin     评论时间: 2011-03-01 13:05:40
very very very
评论人: very     评论时间: 2011-04-21 16:17:01
veryveryvery
评论人: very     评论时间: 2011-04-21 16:17:33
Keep on writing and cuhiggng away!
评论人: xpWTCOeCdwRiaGYB     评论时间: 2013-01-03 23:59:41
xdD6GN , [url=http://urljlqstmund.com/]urljlqstmund[/url], [link=http://pfgklaeudxtk.com/]pfgklaeudxtk[/link], http://iadxbtcmutaq.com/
评论人: smXWptudfoQdVjy     评论时间: 2013-01-05 00:55:58
评论人: オークリー スプリットジャケット     评论时间: 2013-07-18 17:55:10

发表评论:
发表人:
评论: 
验证码:
请输入前面图中的四位验证码,字母不区分大小写
  
 
关于我们 | 诚聘英才 | 联系我们 | 广告业务 | 网站地图 | 法律声明

EasyJF开源团队版权所有  建议使用1024*768分辨率