`

Ext Form提交

阅读更多
<a href="#" id="login_in">[登&nbsp;陆]</a>

Ext.onReady(function() {
Ext.get('login_in').on('click',loginfun);
});
var loginfun=function(){
var simple = new Ext.FormPanel({

            labelWidth: 75,       
            baseCls: 'x-plain',
            defaults: {width: 150},
            defaultType: 'textfield',//默认字段类型
   onSubmit: Ext.emptyFn,
   submit: function(){
   this.getEl().dom.action = 'memberAction.do?action=1'; //连接到服务器的url地址
   this.getEl().dom.submit();
   },

            //定义表单元素
            items: [{
                  fieldLabel: '会员名',
                  name: 'username',//元素名称
                  //anchor:'95%',//也可用此定义自适应宽度
                  allowBlank:false,//不允许为空
                  maxLength:15,
                  blankText:'帐户不能为空'//错误提示内容
               },{
                  fieldLabel: '密码',
                  inputType:'password',
                  //anchor:'95%',
                  name: 'password',
                  maxLength:15,
                  allowBlank:false,
                  blankText:'密码不能为空'
               }
            ],
            buttons: [{
               text: '登陆',
               type: 'submit',
             
               //定义表单提交事件
               handler:function(){
                            if(simple.form.isValid()){//验证合法后使用加载进度条
                            Ext.MessageBox.show({
                               title: '请稍等',
                               msg: '正在加载...',
                               progressText: '',
                               width:300,
                               progress:true,
                               closable:false,
                               animEl: 'loding'
                           });
                         
                           //控制进度速度
                           var f = function(v){
                            return function(){
                                    var i = v/11;
                                    Ext.MessageBox.updateProgress(i, '');
                                    };
                           };

                           for(var i = 1; i < 12; i++){
                              setTimeout(f(i), i*150);
                           }
                         
                           //非ajax提交
                           simple.form.submit();
                         
                           /*
                          //ajax提交到服务器操作
                          simple.form.doAction('submit',{
                            url:'memberAction.do?action=1',//文件路径
                            method:'post',//提交方法post或get
                            params:'',  
                            //提交成功的回调函数
                            success:true,
                            success:function(form,action){
                                 if (action.result.msg=='ok') {
                                    document.location='index.jsp';
                                 } else {
                                    Ext.Msg.alert('登陆错误',action.result.msg);
                                 }
                            },
                            //提交失败的回调函数
                            failure:function(){
                                 Ext.Msg.alert('错误','服务器出现错误请稍后再试!');
                                 //document.location='index.jsp';
                            }
                          });*/
                        }
                                                                        
               }
            },
            {
               text: '关闭',
               handler:function(){simple.form.reset();}//重置表单
             
            }]
          });

             //定义窗体
            win = new Ext.Window({
               id:'win',
               title:'会员登陆',
               layout:'fit',   //之前提到的布局方式fit,自适应布局
               width:300,
               height:150,
               plain:true,
               bodyStyle:'padding:5px;',
               maximizable:false,//禁止最大化
               closeAction:'close',
               closable:true,//禁止关闭
               collapsible:false,//可折叠
               plain: true,
               resizable:false,
               draggable:false,
               buttonAlign:'center',
               items:simple//将表单作为窗体元素嵌套布局
            });
            win.show();//显示窗体

}
分享到:
评论

相关推荐

    EXT异步提交FORM表单

    ### EXT异步提交FORM表单知识点详解 #### 一、EXT异步提交FORM表单概述 在现代Web应用开发中,异步提交表单是一种常见的技术手段,它能够提升用户体验,减少页面刷新带来的数据丢失风险,并能有效提高系统的响应...

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

    在Servlet端,我们需要接收并解析EXT form提交的数据。EXT form默认使用POST方法,数据以JSON或URL编码格式发送。在Servlet的`doPost`方法中,可以通过`HttpServletRequest`对象获取请求参数,然后进行业务处理。 ...

    EXT.form组件

    EXT.form组件是EXT JS库中用于构建表单界面的核心组件集合。这些组件提供了一系列丰富的控件,用于创建具有不同功能的交互式表单。在EXT JS中,表单组件不仅包含基本的输入字段,还支持复杂的输入类型和验证机制。 ...

    Ext 添加功能form表单实例

    根据给定的信息,本文将详细解释“Ext 添加功能form表单实例”的知识点,这主要针对Ext初学者。本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单...

    Ext.form表单中各种属性应用详解

    ### Ext.form表单中各种属性应用详解 #### 1. Ext.form.NumberField **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **...

    Ext2.0 form使用实例的例程

    在这个“Ext2.0 form使用实例的例程”中,我们将深入探讨Ext 2.0的表单(form)组件及其应用。 表单在任何应用程序中都扮演着至关重要的角色,用于收集和验证用户输入的数据。Ext 2.0的表单组件提供了一整套完整的...

    ext form小例子

    在“EXT form小例子”中,我们将探讨EXTJS Form组件的基础用法,包括客户端验证和对`Ext.form.Vtype`的扩展。 1. EXTJS Form组件基础: - 表单创建:EXTJS中的表单通常通过`Ext.create`方法创建,如`Ext.create('...

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

    本文主要总结了EXT表单提交数据的三种常见方法:EXT的form表单AJAX提交、非AJAX提交以及EXT的Ajax类直接提交。 1. EXT的form表单AJAX提交(默认提交方式) EXT的form表单默认采用AJAX方式进行数据提交,这样可以在...

    ext 表单提交

    标题中的“ext 表单提交”指的是Ext JS框架中关于表单数据提交的功能。Ext JS是一个流行的JavaScript库,用于构建富客户端Web应用。它提供了一套完整的组件模型,包括各种UI元素,如表格、面板、表单等。在Ext JS中...

    Extjs 的form load

    ext form 提交表单介绍 个个属性的介绍 两个函数介绍

    Ext form_load

    `Ext.form.Action.Load`用于加载数据,`Ext.form.Action.Submit`用于提交数据。它们都有success和failure回调函数,用于处理请求的结果。 5. **HTTP响应处理**: 成功或失败的判断并不完全依赖于HTTP状态码,而是...

    Ext Form 示例

    Ext Form 是 Ext JS 库中的一个关键组件,用于创建丰富的、交互式的网页表单。它在Web应用程序中扮演着至关重要的角色,允许用户输入、编辑和提交数据。本示例旨在展示如何使用 Ext Form 来构建基本的表单结构以及与...

    ext_表单提交_数据校验

    - **原始的Form提交**:直接使用HTML表单的`submit`方法,适用于不需要异步操作的场景。 - **Ajax提交**:通过Ajax技术,可以在不重新加载页面的情况下发送数据至服务器,提供更流畅的交互体验。 - `Ext.form.Basic...

    EXT提交服务器的三种方式

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

    ext 2.0 form demo

    EXT 2.0 Form Demo 知识点详解 EXT是一个流行的JavaScript库,它专注于构建功能丰富的、用户界面复杂的Web应用程序。EXT 2.0版本在当时是一个重要的里程碑,引入了许多新特性和改进,特别是在表单处理方面。在这个...

    ext控件form相关配置

    ### ext控件Form相关配置详解 #### 一、引言 在现代Web开发中,Ext JS作为一款功能强大且灵活的前端框架,被广泛应用于构建复杂的企业级应用程序。其中,`Form`控件是Ext JS中一个非常重要的组成部分,它为开发者...

    EXT2_combobox_form.rar_combobox ext_ext

    EXT2_combobox_form.rar_combobox ext_ext 这个标题暗示我们关注的是一个与EXT2相关的项目,其中包含了关于form表单和combobox的示例。EXT是一个流行的JavaScript库,主要用于构建富客户端应用,特别是Web应用的用户...

    Extjs优化(二)Form表单提交通用实现

    在本文中,我们将深入探讨如何优化EXTJS中的Form表单提交过程,特别是在EXTJS应用程序中。EXTJS是一个强大的JavaScript框架,用于构建富客户端Web应用程序,而表单提交是任何应用程序中不可或缺的部分。优化这一过程...

Global site tag (gtag.js) - Google Analytics