EXTJS 中Ajax 应用示例

简单的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);  
                        //记录数组中的第一各种，该值将作为下级下拉框的默认取值条件  
                        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 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博客，转载请标明出处：http://blog.csdn.net/homsky/archive/2010/04/05/5451853.aspx