EXTJS 中Ajax 应用示例 -

nbh219

浏览: 275173 次
性别:
来自: 北京

最近访客更多访客>>

u010478936

changyuan126

BlueAeri

sahala79

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXTJS 中Ajax 应用示例

博客分类：

java
js

extjs

简单的Ext.Ajax. request示例

var requestConfig = {

url :'loginServer.jsp',//请求的服务器地址

params : {userName : 'tom',password : '123'},//请求参数

customer : '自定义属性',//附加属性

callback : function(options,success,response){//回调函数

var msg = ["请求是否成功：" ,success,"\n",

"服务器返回值：",response.responseText,

"本地自定义属性：",options.customer];

alert(msg.join(''));

}

Ext.Ajax.request(requestConfig);//发送请求

Ext.Ajax表单提交示例

var requestConfig = {

url :'loginServer.jsp',//请求的服务器地址

form : 'loginForm',//指定要提交的表单id

callback : function(options,success,response){//回调函数

var msg = ["请求是否成功：" ,success,"\n",

"服务器返回值：",response.responseText];

alert(msg.join(''));

}

Ext.Ajax.request(requestConfig);//发送请求

Ext.Ajax. request提交xml数据

function login(){

var requestConfig = {

url :'loginServerXml.jsp',//请求的服务器地址

xmlData : getXml(),//发送xml文档对象

callback : function(options,success,response){//回调函数

var msg = ["请求是否成功：" ,success,"\n",

"服务器返回值：",response.responseText];

alert(msg.join(''));

}

Ext.Ajax.request(requestConfig);//发送请求

}

//生成xml文档对象

function getXml(){

var name = document.forms['loginForm'].userName.value;

var pwd = document.forms['loginForm'].password.value;

var dom = new ActiveXObject("msxml2.DOMDocument");

var header = dom.createProcessingInstruction("xml", "version='1.0'");

dom.appendChild(header);

var root = dom.createElement("loginInfo");

var userName = dom.createElement("userName");

userName.text = name;

var password = dom.createElement("password");

password.text = pwd;

root.appendChild(userName);

root.appendChild(password);

dom.appendChild(root);

return dom;

}

xt.Ajax. request提交json数据

function login(){

var requestConfig = {

url :'loginServerJson.jsp',//请求的服务器地址

jsonData : getJson(),//发送json对象

callback : function(options,success,response){//回调函数

var msg = ["请求是否成功：" ,success,"\n",

"服务器返回值：",response.responseText];

alert(msg.join(''));

}

Ext.Ajax.request(requestConfig);//发送请求

}

//生成json对象

function getJson(){

var name = document.forms['loginForm'].userName.value;

var pwd = document.forms['loginForm'].password.value;

var jsonObj = {

userName : name,

password : pwd

}

return jsonObj;

}

Ext.Updater.update div内容更新器示例

var updater = Ext.get('content-div').getUpdater();//得到元素的更新器

var btns = Ext.select('input');//选择页面中的所有input组件

btns.addListener('click',function(e,b){//成批绑定click事件

update('9-5-'+b.value+'.html');//调用更新函数

});

//定义更新函数

function update(url){

updater.update({//调用更新器的update方法，更新页面元素

url : url

});

}

定义渲染器更新页面元素示例

Ext.Updater.defaults.showLoadIndicator = false;//不显示更新指示器

var updater = Ext.get('content-div').getUpdater();//得到元素的更新器

var cusRender = function(){//自定义渲染器

this.render = function(el, response, updateManager, callback){

var time = el.query('input')[0];

time.value = response.responseText;

}

updater.setRenderer(new cusRender());//指定自定义渲染器

var btns = Ext.get('updateBtn');//选择页面中id为updateBtn的元素

btns.on('click',function(){//绑定click事件

update();//调用更新函数

});

//定义更新函数

function update(){

updater.update({//调用更新器的update方法，更新页面元素

url : 'timeServer.jsp'

});

}

自动定时更新页面元素示例

Ext.Updater.defaults.showLoadIndicator = false;//不显示更新指示器

var updater = Ext.get('serverTime').getUpdater();//得到元素的更新

Ext.get('startAutoBtn').on('click',startAutoUpdate);

Ext.get('stopAutoBtn').on('click',stopAutoUpdate);

function startAutoUpdate(){

//开始定时自动刷新

updater.startAutoRefresh(1,'timeServer.jsp');

}

function stopAutoUpdate(){

//停止定时自动刷新

updater.stopAutoRefresh();

}

提交表单更新页面元素示例

<mce:script type="text/javascript"><!--

Ext.onReady(function(){

Ext.Updater.defaults.indicatorText =

'<div class="loading-indicator">登陆中....</div>';//设置更新指示器文字

var updater = Ext.get('loginMsg').getUpdater();//得到元素的更新

Ext.get('loginBtn').on('click',login);

function login(){

//提交表单，在回调函数中更新页面元素

updater.formUpdate('loginForm','loginServer.jsp');

}

})

// --></mce:script>

</HEAD>

用户名：<input name = 'userName' type='text'>

密码：<input name = 'password' type='password'>

</form>

状态：<span id='loginMsg'></span>

</BODY>

</HTML>

多级联动菜单

<mce:script type="text/javascript"><!--

Ext.onReady(function(){

//将下拉框id顺序存入数组中，以便通过遍历数组级联更新

var lists = ['s1','s2','s3']

//为下拉框绑定change事件的处理函数

Ext.select('select').on('change',function(e,select){

//取得下拉框中选中的值

var value = select.options[select.selectedIndex].value;

//取得下拉框id

var id = select.id;

//通过循环的到下拉框id在lists数组中的索引位置

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

if(lists[i] == id){

var index = i;

}

//取得相邻下拉框id在lists数组中的索引

var nextIndex = index + 1;

if(nextIndex >= lists.length){

nextIndex = lists.length - 1;

}

//移除相邻下拉框及后续下拉框的值

remove(nextIndex);

//为相邻下拉框及后续下拉框加载新值

getList(nextIndex,value);

});

//通过Ajax方式为下拉框加载数据，

function getList(index,value) {

Ext.Ajax.request({

url : 'bookServer.jsp',//请求的服务器地址

params : {

target : lists[index],

value : value

callback : function(options,success,response){

if(success){

//取得要更新的下拉框

var select = Ext.get(lists[index]);

//执行返回字符串，得到数组对象

var array = eval(response.responseText);

//记录数组中的第一各种，该值将作为下级下拉框的默认取值条件

var firstValue;

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

var o = array[i];

if(i == 0){

firstValue = o.value;

}

//向下拉框中追加条目

select.appendChild(createOption(o.value,o.name));

}

//如果不是最后一个下拉框则继续加载相邻下拉框的数据

if(index < lists.length){

getList(index + 1,firstValue);

}

})

}

//根据传入的value和text创建选项

function createOption(value, text) {

var opt = document.createElement("option");

opt.setAttribute("value", value);

opt.appendChild(document.createTextNode(text));

return opt;

}

//级联删除下拉框及子下拉框的值

function remove(index){

for(var i = index ; i < lists.length ; i++){

var select = Ext.get(lists[i]).dom;

while(select.length>0){

select.options.remove(select.length-1)

}

//默认加载值为1的教学类列表

getList(1,"1");

//默认列表s1的教学类被选中

Ext.get('s1').dom.selectedIndex = 0;

})

// --></mce:script>

自定义渲染器+解码json对象+ json式生成表格（综合示例：天气预报）

<mce:script type="text/javascript"><!--

Ext.onReady(function(){

//设置更新指示器文字

Ext.Updater.defaults.indicatorText =

'<div class="loading-indicator">读取天气信息....</div>';

//得到元素的更新器

var updater = Ext.get('weather').getUpdater();

//自定义渲染器

var weatherRender = function(){

this.render = function(el, response, updateManager, callback){

//解码响应字符串，得到对应的json对象

var weaObj = Ext.util.JSON.decode(response.responseText);

//利用工具类Ext.DomHelper的overwrite方法生成表格并以覆盖方式更新元素el

Ext.DomHelper.overwrite(el,{

tag:'table',children:[

{tag:'tr',children:[

{tag:'td',html:'日期：'},

{tag:'td',html:weaObj.date}

]},

{tag:'tr',children:[

{tag:'td',html:'风速：'},

{tag:'td',html:weaObj.windSpeed}

]},

{tag:'tr',children:[

{tag:'td',html:'湿度：'},

{tag:'td',html:weaObj.humidity}

]},

{tag:'tr',children:[

{tag:'td',html:'最高气温：'},

{tag:'td',html:weaObj.maxTemp}

]},

{tag:'tr',children:[

{tag:'td',html:'最底气温：'},

{tag:'td',html:weaObj.minTemp}

]}

]

});

}

//指定自定义渲染器

updater.setRenderer(new weatherRender());

//选择页面中id为select的元素

var select = Ext.get('city');

//绑定change事件

select.on('change',function(e,sel){

var cityCode = sel.options[sel.selectedIndex].value;

var cityName = sel.options[sel.selectedIndex].text;

//调用更新函数,并将选中城市的编码出入更新函数中

updateWeather(cityCode,cityName);

});

//定义更新函数

function updateWeather(cityCode,cityName){

updater.update({//调用更新器的update方法，更新页面元素

url : 'weatherServer.jsp',

params : {cityCode:cityCode},

callback : function(el,success,response,options){

//读取天气信息失败，则更新页面元素已显示错误提示

if(success == true){

Ext.get('cityName').update(cityName);

}else{

el.update("读取 "+cityName+" 天气信息失败!");

}

});

}

//默认读取北京的天气情况

updateWeather('CHXX0008','北京');

})

// --></mce:script>

Ext.form.HtmlEditor + Updater更新器 + 延时Ajax任务(综合示例：自动保存编辑器)

<mce:script type="text/javascript"><!--

Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';

Ext.QuickTips.init();//使用HtmlEditor之前必须初始化提示

var note = new Ext.Panel({

title:'网络记事本',

renderTo : 'webNote',

frame : true,

layout:'fit',

tbar : [

{

text : '保存',

//点击保存按钮即时执行保存操作不进行延时

handler : saveNode

'-',

'最近保存时间：',

Ext.get('saveTime').dom,

'-',

Ext.get('saveStatus').dom

items : [

new Ext.form.HtmlEditor({

id : 'content',

height : 150,

width : 500,

fontFamilies : ['宋体','隶书','黑体'],//字体列表

listeners : {

//sync事件将在文本发生变化时被触发

sync : editorChange

}

})

]

});

//取得HtmlEditor组件的引用

var editor = note.findById('content');

//设置更新指示器文字

Ext.Updater.defaults.indicatorText =

'<div class="loading-indicator">保存....</div>';

//取得页面中id为saveTime元素的更新器

var timeUpdater = Ext.get('saveTime').getUpdater();

//取得页面中id为saveStatus元素的引用

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

//定义HtmlEditor输入内容发生变化时的处理函数

function editorChange() {

//文本变化后延时3000毫秒执行保存操作

task.delay(3000);

}

//将保存操作转换为一个延时任务

var task = new Ext.util.DelayedTask(saveNode);

//定义保存文本内容的函数

function saveNode() {

timeUpdater.update({

url : 'noteServer.jsp',

method : 'POST',

params : {

//将文本内容作为参数传递到后台服务器

content : editor.getValue()

callback : function(el,success,response,options){

if(success == true){

saveStatus.update("<font color='green'>保存成功</font>");

}else{

saveStatus.update("<font color='red'>保存失败</font>");

}

})

}

})

// --></mce:script>

</HEAD>

</BODY>

</HTML>

文章来自：http://www.cnblogs.com/johan/archive/2010/04/05/1947977.html

分享到：

extjs 点击文本框弹出窗口和失去焦点 | Javascript调用ActiveX对象

2013-04-02 13:42
浏览 1046
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

EXTJS 中Ajax 应用示例

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

EXTJS 中Ajax 应用示例

评论

发表评论

相关推荐

maven 安装jar包命令

aspose word 单元格加斜杠

beans profile

一个action操作两个service,其中一个报错,如何保证事务的一致性?

web service 事物

java 为什么只能单继承

java 递归

bootstrap 验证是否通过

springMvc分页

jdbc 连接mysql

java 定时任务

java 判断为空

js 格式化时间

js json里加数据

查询多表返回一个list

判断多个参数

xml 路径

json嵌套 解析

java 读取txt和解析json

读取properties配置文件里边的属性方法

最近访客更多访客>>

json嵌套解析