`
tayuexiaotian
  • 浏览: 24885 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

extjs怎么实现页面值的传递和接受

阅读更多
extjs传参和用什么语言做后台处理没关系,用以下方法传值过去,然后用相应语言接收参数的方法正常接收就行了,
1.ajax方法传值:
Ext.Ajax.request({
                url:'DoAction.jsp?method=add',
                params:{UserName:'张三',Gender:'男'},//参数列表
                callback:function(options,success,response){//回调函数
                  if(success){
                                    alert(response.responseText);//返回数据
                  }
                }
         })
2.表单传值
定义一个Ext.form.FormPanel,(后台接收参数的名称是表单各元素的id)
var ItemForm = new Ext.form.FormPanel({.....})
然后用ItemForm.getForm().submit提交表单:
ItemForm.getForm().submit({
                 waitMsg:'正在保存数据,请稍候...',
                 waitTitle:'提示',
                 method:'POST',
                 url:'DataAction.jsp?method=save',
                 params:{UserName:'张三',Gender:'男'},
                 success:function(form,action){
                     //do something here
                 },
                 failure:function(form,action){
                          Ext.Msg.alert('提示','保存失败。');
                 }
})
------------------------------------------------------------------------------------------------忧伤的分割线----------------------------------
关于JavaScript中this的使用,这是一个由来已久的问题了。我们这里就不介绍它的发展历史了,只结合具体的例子,告诉大家可能会遇到什么问题,在遇到这些问题时EXT是如何解决的。在使用EXT时,最常碰到的就是使用Ajax回调函数时出现的问题,如下面的代码所示。

现在的HTML 页面中有一个text输入框和一个按钮。我们希望按下这个按钮之后,能用Ajax去后台读取数据,然后把后台响应的数据放到text中,实现过程如代码清单10-6所示。
代码清单10-6 Ajax中使用回调函数
function doSuccess(response) {
    text.dom.value = response.responseText;
}
Ext.onReady(function(){
    Ext.get('button').on('click', function(){
        var text = Ext.get('text');
        Ext.lib.Ajax.request(
            'POST',
            '08.txt',
            {success:doSuccess},
            'param=' + encodeURIComponent(text.dom.value)
        );
    });
});
在上面的代码中,Ajax已经用Ext.get('text')获得了text,以为后面可以直接使用,没想到回调函数success不会按照你写的顺序去执行。当然,也不会像你所想的那样使用局部变量text。实际上,如果什么都不做,仅仅只是使用回调函数,你不得不再次使用Ext.get('text')重新获得元素,否则浏览器就会报text未定义的错误。
在此使用Ext.get('text')重新获取对象还比较简单,在有些情况下不容易获得需要处理的对象,我们要在发送Ajax请求之前获取回调函数中需要操作的对象,有两种方法可供选择:scope和createDelegate。
l    为Ajax设置scope。
function doSuccess(response) {
    this.dom.value = response.responseText;
}
Ext.lib.Ajax.request(
    'POST',
    '08.txt',
    {success:doSuccess,scope:text},
    'param=' + encodeURIComponent(text.dom.value)
);              
在Ajax的callback参数部分添加一个scope:text,把回调函数的scope指向text,它的作用就是把doSuccess函数里的this指向text对象。然后再把doSuccess里改成this.dom. value,这样就可以了。如果想再次在回调函数里用某个对象,必须配上scope,这样就能在回调函数中使用this对它进行操作了。
l    为success添加createDelegate()。
function doSuccess(response) {
    this.dom.value = response.responseText;
}
Ext.lib.Ajax.request(
    'POST',
    '08.txt',
    {success:doSuccess.createDelegate(text)},
    'param=' + encodeURIComponent(text.dom.value)
);
createDelegate只能在function上调用,它把函数里的this强行指向我们需要的对象,然后我们就可以在回调函数doSuccess里直接通过this来引用createDelegate()中指定的这个对象了。它可以作为解决this问题的一个备选方案。
如果让我选择,我会尽量选择scope,因为createDelegate是要对原来的函数进行封装,重新生成function对象。简单环境下,scope就够用了,倒是createDelegate还有其他功能,比如修改调用参数等。
分享到:
评论

相关推荐

    extjs的数据传递

    本文将详细介绍如何在ExtJS中使用AJAX来实现前后端之间的数据传递,特别是关注JSON格式的数据传输。 #### 二、ExtJS中的AJAX数据传递 ##### 1. AJAX数据传递方式 - **POST方法**:通常用于提交表单数据到服务器。...

    EXTJS 不同页面之间的传值问题(数据不经过后台,通过页面取得)

    这篇博客"EXTJS 不同页面之间的传值问题(数据不经过后台,通过页面取得)"探讨的就是如何在EXTJS应用的不同视图间传递数据,而无需通过后端接口。 首先,我们可以使用EXTJS的全局变量来实现简单的数据共享。全局...

    获取ExtjS表格的值_ExtJS_3.4cellSelectModel

    资源名称:获取ExtjS表格的值_ ExtJS_3.4 cellSelectModel资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    extjs实现的带标签、翻页动画的书

    在本项目中,“extjs实现的带标签、翻页动画的书”显然利用了ExtJS的组件化特性和动画功能,创建了一个模拟真实书籍阅读体验的应用。 首先,我们来看看“标签”这一概念。在Web应用中,标签(Tab)通常用来组织和...

    extjs实现动态树

    总之,通过深入理解和灵活运用上述概念和方法,我们可以创建出交互性强、响应迅速的ExtJS动态树应用,同时结合Accordion布局提供更丰富的用户界面。在实际开发中,应根据项目需求和性能考虑,合理配置和优化动态树的...

    ExtjS实现聊天功能

    在这个"ExtJS实现聊天功能"的项目中,我们将探讨如何利用ExtJS框架构建一个类似于QQ的聊天应用程序。 首先,我们要理解聊天功能的核心要素。一个基本的聊天应用通常包含以下部分: 1. **用户界面**:ExtJS提供了...

    Extjs 轻松实现下拉框联动

    最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵

    Extjs实现的聊天室

    在本项目中,“Extjs实现的聊天室”利用了ExtJS的组件化特性和WebSocket技术,构建了一个实时的在线聊天平台。 WebSocket是一种在客户端和服务器之间建立长连接的协议,允许双方进行全双工通信,即数据可以在任意...

    extjs实现权限拦截

    ExtJS的`Ext.Router`可以配置路由规则,实现页面跳转。结合权限信息,我们可以设置路由拦截器,确保只有拥有特定权限的用户才能访问特定的页面或功能。 6. **Struts拦截器** 在Struts中,拦截器用于在Action执行前...

    extjs 实现动态表头

    动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构。这在处理数据展示和操作时具有很大的灵活性,尤其在数据字段不确定或需要自定义的情况下非常实用。 标题“extjs 实现...

    extjs 登陆页面+验证码

    标题中的“extjs 登录页面+验证码”表明我们要讨论的是使用ExtJS框架构建的一个登录页面,其中包含了验证码功能。ExtJS是一个流行的JavaScript库,用于构建桌面级的Web应用程序,它提供了丰富的用户界面组件和强大的...

    Extjs 实现增删改查

    Extjs 实现增删改查,可以与后台代码结合起来,利于实现

    EXTJS图书管理系统页面(JAVA)

    总的来说,"EXTJS图书管理系统页面(JAVA)"是一个结合了EXTJS前端技术和Java后端服务的项目,旨在提供一个高效、易用的图书管理平台。通过EXTJS的组件和API,开发者可以快速构建出功能丰富的用户界面,同时利用Java...

    extjs实现报表

    在"extjs实现报表"这个主题中,我们将深入探讨如何利用ExtJS来设计和实现各种类型的报表。 1. **ExtJS报表基础** - **数据绑定**:ExtJS支持双向数据绑定,可以轻松地将数据显示在UI上,并实时更新数据变化。 - *...

    extjs4 开发的部分纯静态页面

    此外,ExtJS 4还支持数据绑定和远程数据加载,通过Ajax请求与服务器进行通信,实现数据的动态加载和刷新。这使得即使是在“纯静态页面”中,也能实现数据的动态展示和交互。 总之,这个压缩包可能是一个学习ExtJS 4...

    jSP+EXTJS实现upload

    在IT行业中,网页开发经常会遇到文件上传的需求,而"jSP+EXTJS实现upload UploadDialog"就是一种常见的解决方法。这个话题主要涵盖了两个关键部分:JavaServer Pages (JSP) 和 ExtJS,它们共同用于创建一个具有文件...

    EXTJS页面编辑器

    EXTJS页面编辑器是一款专为...通过vjPage等子文件,你可以看到编辑器生成的具体页面实例,进一步学习和理解EXTJS页面构建的细节。无论你是新手还是经验丰富的EXTJS开发者,这个编辑器都能成为你构建出色Web应用的利器。

    extjs中本地照片预览、blob数据在oracle中存取

    此压缩包中完全能实现的功能是在extjs中让本地照片预览,并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据...

    extjs实现登陆验证

    通过以上分析,我们了解到ExtJS框架下实现登录验证的基本流程和技术细节。从初始化组件、构建表单到处理用户输入,每一步都体现了ExtJS在Web应用开发中的强大功能和灵活性。理解这些代码背后的逻辑,不仅能够帮助...

    Extjs 实现多行合并(rowspan)效果

    renderer函数接收一个值和上下文对象作为参数,可以返回一个HTML字符串或DOM元素来自定义单元格的显示。在这个函数中,我们可以根据数据计算出需要合并的行数,并设置`rowspan`属性。 2. **Store数据处理**:在数据...

Global site tag (gtag.js) - Google Analytics