`
atgoingguoat
  • 浏览: 195128 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

EXTJS 中Ajax 应用示例

    博客分类：
  • js
Ajax网络应用应用服务器EXTjson 
阅读更多

简单的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

分享到：
| extjs json解析List数据
评论
发表评论

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

相关推荐

    extjs对ajax的支持文档

    在ExtJS中，Ajax支持是核心功能之一，它使得在浏览器端与服务器进行异步通信成为可能，无需刷新整个页面。以下是对Ajax支持的详细说明： 1. **Ajax基础**： - Ext.Ajax是ExtJS中的核心模块，用于处理所有与Ajax...

    extjs后台交互完整示例

    在"extjs后台交互完整示例"中，我们可以看到如何使用ExtJS与服务器进行数据交换，这对于创建动态和数据驱动的应用程序至关重要。 首先，我们要理解ExtJS的数据模型和存储机制。它提供了Store对象，作为客户端数据的...

    EXTJS 上传组件及示例

    本篇文章将详细解析EXTJS中的上传组件及其示例，帮助开发者更好地理解和使用这一功能。 EXTJS 的上传组件通常通过`Ext.form.field.File`（也称为FileField或UploadField）实现。这个组件提供了一个表单字段，用户...

    Extjs配置文件和示例文件

    示例JSP文件通常包含用于加载ExtJS库、配置文件和应用的HTML结构，以及与后端进行通信的Ajax请求。而js程序文件则是实现具体功能的JavaScript代码，比如定义组件、处理用户交互、操作数据等。 例如，一个简单的JSP...

    extjs3.0开发包含示例api

    这个开发包包含了EXTJS 3.0的核心API、示例代码和源文件，是学习和开发EXTJS应用程序的重要资源。 一、EXTJS 3.0 API EXTJS 3.0的API是其核心组成部分，提供了大量的可重用组件，如表格、面板、窗口、菜单、按钮等...

    Extjs6示例中文版

    ### Extjs6示例中文版知识点...通过学习本书，读者不仅可以了解ExtJS6的基础知识和高级特性，还能获得实际项目中的应用案例，从而加快自己的学习进程。希望每位读者都能从中获益，提升自己的技术能力和项目实践水平。

    EXTJS4导出excel示例

    这个示例中，`store.each()`方法遍历所有记录，`fields`对象包含了每条记录的所有字段。`encodeURIComponent()`函数用于对CSV数据进行URL编码，以避免特殊字符导致的问题。 注意，由于安全限制，现代浏览器可能不...

    extjs ajax tree（js动态树,无需递归）

    在ExtJS中，创建一个AJAX树通常涉及以下几个步骤： 1. **引入ExtJS库**：首先，你需要在HTML页面中引入ExtJS库的CSS和JavaScript文件，这将提供必要的UI组件和功能。 2. **定义树的配置**：创建一个`Ext.tree....

    tree 动态树 extjs ajax

    在IT行业中，ExtJS是一个广泛使用的JavaScript框架，用于构建富客户端Web应用程序。它提供了一整套组件库，包括数据管理、用户界面元素以及强大的图表和表格功能。在给定的标题和描述中，主要涉及了ExtJS中的动态树...

    extjs最全项目 js struts Ajax

    开发者通过这个项目可以学习到EXTJS、Struts和Ajax的集成使用，以及如何在实际项目中有效利用这些技术。项目的全面性和实用性被高度赞扬，意味着它可能包含了丰富的示例代码和详细的文档，对于学习者来说具有很高的...

    extjs C#控件全示例

    这个示例集合为开发者提供了丰富的控件使用方法，展示了如何在C#环境中有效地利用ExtJS进行前端界面的构建。 【描述】中的"封装的extjs2.0"表明该示例集是将ExtJS 2.0的功能与C#编程语言相结合，创建了一个易于理解...

    在Extjs中使用ajax传参到php中

    7. **示例中的文件**： 从提供的文件名来看，可能包含了一个EXTJS应用程序的示例代码，展示了如何使用AJAX向PHP传递参数并接收返回数据。具体实现细节可能在这些文件中找到，包括EXTJS的视图（view）、控制器...

    EXTJS 折线 chart action 代码示例

    EXTJS 是一款强大的JavaScript前端框架，它提供了丰富的组件库，包括图表（chart）功能，用于展示数据可视化。在EXTJS中，折线图（line ...EXTJS的强大在于其丰富的API和组件库，允许开发者构建功能强大的Web应用程序。

    Extjs Tree + JSON + Struts2 示例源代码

    这个示例中，ExtJS用于前端UI的构建，JSON作为数据交换格式，而Struts2则作为后端MVC框架处理请求和返回数据。 1. **ExtJS Tree**: ExtJS 是一个强大的JavaScript库，专门用于创建富客户端应用程序。其中的Tree组件...

    extjs4官方示例以及api文档html版

    在本压缩包中，你将找到EXTJS4的官方示例和API文档的HTML版本，这些都是学习和开发EXTJS4应用的重要资源。 首先，EXTJS4的官方示例是理解框架功能和用法的最佳途径。这些示例涵盖了EXTJS4的各种组件和功能，包括...

    Extjs Ajax 购物车

    在"Extjs Ajax 购物车"这个项目中，这两种技术被巧妙地结合起来，为用户提供了一个高效、流畅的购物体验。 **1. ExtJS框架介绍** ExtJS提供了一套完整的组件模型，包括表格、面板、窗口、菜单等，这些组件可以方便...

    ExtJS员工名录示例应用程序

    ExtJS员工名录示例应用程序是一个基于JavaScript开发的项目，它主要使用了Ext JS框架来构建。Ext JS是一款功能强大的前端JavaScript库，专为构建富互联网应用程序（RIA）而设计。这个示例应用展示了如何利用Ext JS...

    extjs mvc简单示例

    这个简单的示例展示了如何在ExtJS中使用MVC模式创建一个基本的数据展示应用。在实际项目中，你可以根据需求扩展模型、视图、控制器以及应用配置，构建更复杂的交互和功能。记住，MVC模式的主要优点在于提高了代码的...

    extjs简单示例。带程序。

    在“extjs + asp.net简单示例”中，我们将看到EXTJS如何与微软的asp.net后端技术结合，共同完成一个Web应用。 在ASP.NET中，开发者通常使用C#或VB.NET编写服务器端代码，处理数据、业务逻辑以及与数据库的交互。而...

    Java + ExtJs示例

    标题"Java + ExtJs示例"表明我们将探讨如何将这两种技术结合使用来创建功能丰富的Web应用。通常，Java在服务器端运行，处理业务逻辑和数据库交互，而ExtJS在客户端运行，负责展示交互式的用户界面。 描述中提到...

Magicbox
Global site tag (gtag.js) - Google Analytics