ext使用ajax

使用Ajax
在弄好一些页面后,你已经懂得在页面和脚本之间的交互原理(interact)。接下来,你应该掌握的是,
怎样与远程服务器(remote server)交换数据,常见的是从数据库加载数据(load)或是保存数据(save)
到数据库中。通过JavaScript 异步无刷新交换数据的这种方式,就是所谓的Ajax。Ext 内建卓越的Ajax 支
持,例如,一个普遍的用户操作就是,异步发送一些东西到服务器,然后,UI 元素根据回应(Response)
作出更新。这是一个包含text input 的表单,一个div 用于显示消息(注意,你可以在ExtStart.html 中加入
下列代码,但这必须要访问服务器):
<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="oKButton" value="OK" />
接着,我们加入这些处理交换数据的JavaScript 代码到文件ExtStart.js 中(用下面的代码覆盖):
Ext.onReady(function(){
Ext.get('oKButton').on('click', function(){
var msg = Ext.get('msg');
msg.load({
url: [server url], //换成你的URL
params: 'name=' + Ext.get('name').dom.value,
text: 'Updating...'
});
msg.show();
});
});
这种模式看起来已经比较熟悉了吧!先获取按钮元素,加入单击事件的监听。在事件处理器中(event
handler),我们使用一个负责处理Ajax 请求、接受响应(Response)和更新另一个元素的Ext 内建类,称
作UpdateManager。UpdateManager 可以直接使用,或者和我们现在的做法一样,通过Element 的load 方
法来引用(本例中该元素是id 为“msg“的div)。当使用Element.load 方法,请求(request)会在加工处理后
发送,等待服务器的响应(Response), 来自动替换元素的innerHTML。简单传入服务器url 地址,加上字
符串参数,便可以处理这个请求(本例中,参数值来自“name”元素的value),而text 值是请求发送时提示的
文本,完毕后显示那个msg 的div(因为开始时默认隐藏)。当然,和大多数Ext 组件一样,UpdateManager
有许多的参数可选,不同的Ajax 请求有不同的方案。而这里仅演示最简单的那种。
原文地址:https://www.cnblogs.com/winner/p/1242914.html