简单的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>??
?<BODY style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;">??
??? <form id='loginForm'>??
??? 用户名：<input name = 'userName' type='text'>??
??? 密? 码：<input name = 'password' type='password'>??
??? <input type='button' value='登陆' id='loginBtn'>??
??? </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);??
??????????????????????? //记录数组中的{dy}各种，该值将作为下级下拉框的默认取值条件??
??????????????????????? 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));??
??????????????????????? }??
??????????????????????? //如果不是{zh1}一个下拉框则继续加载相邻下拉框的数据??
??????????????????????? 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:'{zg}气温：'},??
??????????????????????????? {tag:'td',html:weaObj.maxTemp}??
??????????????????????? ]},??
??????????????????????? {tag:'tr',children:[??
??????????????????????????? {tag:'td',html:'{zd2}气温：'},??
??????????????????????????? {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 style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;">??
??? <div id='webNote' style="width:522"/>??
??? <div id='saveTime'/>??
??? <div id='saveStatus'/>??
?</BODY>??
</HTML>
?
?
本文来自CSDN博客，转载请标明出处：
