`

使用ext2的form提交表单(非AJAX方式)

    博客分类:
  • js
阅读更多

http://beckrabbit.iteye.com/blog/132686  非ajax方式提交表单

 

  1. var simple = new Ext.form.FormPanel({
  2. url:'../userlogin., do'
  3. //实现非AJAX提交表单一定要加下面的两行!
  4. /*onSubmit: Ext.emptyFn,    //onSubmit没有起作用
  5. submit: function() {
  6. //有疑问的地方
  7. this.getEl().dom.action='../userlogin.do';
  8. this.getEl().dom.submit();
  9. }, */
  10. buttons: [{
  11. text: '登录',
  12. type:'button',
  13. id:'login',
  14. handler: login
  15. },{
  16. text: '重置',
  17. type:'reset',
  18. id:'clear',
  19. handler: reset
  20. } ]

function login(){

    alert('form submit!');
      simple.getForm().getEl().dom.action='www.baidu.com';
      simple.getForm().getEl().dom.submit();

}

    handler如何传递参数?例如:如何向function login里传递action的值?
    关于回调函数指定参数问题,由来已久,extjs简洁优雅完美的解决了这个问题。

    createDelegate ( [Object obj ] , [Array args ] , [Boolean/Number appendArgs ]  ) : Function



    返回一个函数, 这个函数调用原函数,原函数中的this指向obj ,关于这个函数的参数由 appendArgs 指定 :

    如 function2=function1.createDelegate(obj,args,appendArgs);

    function2 call function1 ,function1 中的 this == obj

    1. appendArgs false

    那么 调用 function2时传的参数被忽略,args数组参数作为function1的参数运行。

    2. appendArgs === true

    那么 调用 function2时传的参数放在args数组前面合成一个新的数组,作为function1的参数运行。

    3.typeof appendArgs == 'Number'

    假设 调用 function2时传的参数 为 array1 (注意要 slice 为 真正的 Array)
    那么将 args 数组插入到 array1 的指定 appendArgs位置 (利用 splice( appendArgs,0 ))
    然后再把最终数组 作为function1的参数运行。

      buttons: [{
                text: 'Save',
                type: 'button',
                id: 't',
               // handler: test
                handler: test2.createDelegate(this,'www.baidu.com',true)   //把this传进test2函数中,在函数中,也把www.baidu.com传进test2函数中
            },{
                text: 'Cancel'
            }]
    function test2(){

     alert('form submit---传url!' +this);
     }
     Ext.get('action_c').on('click',action_bc.createDelegate(Ext.get('action_c'),['自定义参数在第一位'],0));  
    ext 表单提交按钮与post表单值方法
    2008-08-20 11:14

    buttons: [{
                 text: '登录',
                 handler:function(){//当点击按钮执行这个函数
                             if(win.getComponent('login').form.isValid()){login为from的id
                             win.getComponent('login').form.submit({
                                 url:'login_chk.php',
                                 waitTitle:'提示',
                                 method: 'POST',
                                 waitMsg:'正在登录验证,请稍候...',
                                 success:function(form,action){//如果post成功执行这里
                                 var loginResult = action.result.success;
                                 if(loginResult == false){//如果login_chk.php返回false执行这里
                                     Ext.MessageBox.alert('提示', action.result.message);
                                 } else if(loginResult == true){//反之执行这里
                                     Ext.MessageBox.alert('提示', action.result.message);
                                     window.location.href='http://www.baidu.com';
                                 }                                                            
                   } ,
                   failure: function(form,action) {
                                       Ext.MessageBox.alert('提示', action.result.message);
                                       win.getComponent('login').form.reset();
                                  
               }                            
                         });
                         }
                         }
                     },{
                 text: '取消',
       handler:function(){simple.form.reset();}//重置表单
             }]

分享到:
评论

相关推荐

    EXT异步提交FORM表单

    EXT异步提交FORM表单的核心是通过Ajax技术实现表单数据的后台提交,而无需刷新整个页面。这种方式的主要优点在于能够提供更加流畅的用户交互体验,同时减少了服务器端的负载压力。 ##### 2.2 实现步骤 1. **初始化...

    完成的 Ajax 提交表单

    2. **Ajax提交表单**:当表单需要异步提交时,可以利用`Ext.Ajax.request`方法。这个方法接受一个配置对象,其中包含了URL、方法(GET或POST)、数据、成功和失败的回调函数等参数。在本例中,你可能将表单的提交...

    Ext2.0 form使用实例的例程

    7. **表单提交(Form Submission)**:表单可以以两种方式提交:异步(Ajax)或同步(传统的HTTP请求)。异步提交在后台处理数据,不会刷新整个页面,提供了更好的用户体验。 8. **自定义组件(Custom Components)...

    ext_表单提交_数据校验

    其中,`form.submit()`是Ext默认的提交方式,它利用Ajax技术进行数据传输,无需刷新整个页面即可完成数据的提交和响应处理,极大地提升了用户体验。 - **原始的Form提交**:直接使用HTML表单的`submit`方法,适用于...

    Ext ajax 上传文件

    在HTML中,`<input type="file">`元素用于让用户选择本地文件,然后通过表单提交或使用Ajax进行非表单提交。Ajax文件上传通常结合FormData对象来实现,它允许我们发送二进制数据,如图片、文档等。 在Ext JS中,...

    ext form 表单提交数据的方法小结

    1. EXT的form表单AJAX提交(默认提交方式) EXT的form表单默认采用AJAX方式进行数据提交,这样可以在不刷新页面的情况下与服务器进行异步交互。以下是一个简单的示例: ```javascript function login(item) { if ...

    EXT提交服务器的三种方式

    1. **EXT的Form表单AJAX提交**:这是EXT中最常见的提交方式,它允许你在不刷新整个页面的情况下与服务器进行异步通信。通过使用`doAction`方法,你可以方便地触发表单的提交,并指定URL、HTTP方法以及额外的参数。...

    ext 表单提交

    通常,Ext JS的表单提交使用Ajax方式,这意味着它可以异步地将表单数据发送到服务器,无需页面刷新。这种方式提供了更好的用户体验,因为用户可以在数据提交的同时继续与应用交互。 在Ext JS中,表单(`Ext.form....

    ext 2.0 form demo

    1. 数据提交:EXT 2.0表单支持AJAX提交,可以在后台处理数据验证和保存,无需页面刷新。 2. 表单加载与填充:可以从服务器动态加载表单数据,或根据用户选择填充表单。 3. 表单重置:方便地清空表单字段,恢复到...

    EXT 表单验证EXT 表单验证

    2. **实时验证**:EXT表单支持实时验证,这意味着当用户在输入字段中键入内容时,系统会立即检查数据的有效性,并显示相应的错误提示。这是通过监听`change`事件和调用`validate()`方法实现的。 3. **自定义vtype**...

    Ext 动态加载表单数据

    Ext Form提供了一种结构化的方式来组织这些字段,并提供了验证、提交和数据绑定等功能。 动态加载表单数据涉及到的主要知识点包括: 1. **JSON数据格式**:JSON(JavaScript Object Notation)是一种轻量级的数据...

    EXT dojochina ExtAjax表单提交 L9.rar

    当用户填写完表单并点击提交按钮时,我们通常会使用`Ext.Ajax`对象来实现非刷新的Ajax提交。 "ExtAjax表单提交 L9"可能指的是教程的第九个部分,讲解了如何在EXTJS中实现Ajax表单提交。在EXTJS中,表单的提交过程...

    ExtJs4.0 表单提交Demo

    在使用Ext Ajax提交表单前,通常需要先将表单数据序列化为JSON或URL编码格式。ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例,然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 ...

    EXT中文文档,EXT简明教程(Ajax框架)

    你可以通过这个文档了解到EXT的基础组件,如表格(Grid)、面板(Panel)、窗口(Window)、表单(Form)等,以及如何进行布局管理、数据绑定、Ajax通信等核心功能。同时,它还涵盖了EXT的高级特性,如树形视图...

    ext控件form相关配置

    其中,`Form`控件是Ext JS中一个非常重要的组成部分,它为开发者提供了创建各种类型表单的功能,包括简单的登录表单到复杂的多步骤表单。本文将深入探讨Ext JS中的`Form`控件及其相关配置,帮助开发者更好地理解和...

    Ext 入门 登陆验证表单提交

    在EXTJS中,我们可以使用`Ext.application`方法初始化应用,并在`views`配置中定义表单视图。表单通常由`Ext.container.Container`或`Ext.form.Panel`创建,包含`Ext.form.field.Text`(用户名)和`Ext.form.field....

    EXT制作的FORM,可以与Servlet进行交互

    EXT form支持使用`Ext.Ajax`类来进行AJAX提交。当用户填写完表单并点击提交按钮时,可以通过`form.submit()`方法将数据异步发送到服务器。在提交过程中,我们可以设置URL(对应Servlet的URL),以及成功和失败的回...

    EXT的3中提交方式

    本文详细介绍了EXT框架中三种主要的提交方式:`form`提交、`Ajax`提交以及同步提交。每种方式都有其适用场景和特点,开发者可以根据实际需求选择合适的方法。需要注意的是,在现代Web应用中,由于用户体验的重要性,...

Global site tag (gtag.js) - Google Analytics