ext 表单提交

上个ext表单提交的例子，用servlet作为表单的服务器验证，当用户名和密码相同时，提示验证通过，否则提示验证失败。（附例子）
帖出ext表单布局代码

Ext.onReady(function(){
// 编码方式
Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
          // 使用表单提示
          Ext.QuickTips.init();
          Ext.form.Field.prototype.msgTarget = 'side';

        // 定义表单
          var simple = new Ext.FormPanel({
            labelWidth: 75,
            baseCls: 'x-plain',
            defaults: {width: 150},
            defaultType: 'textfield',// 默认字段类型

            // 定义表单元素
            items: [{
                  fieldLabel: '帐户',
                  name: 'name',// 元素名称
                  // anchor:'95%',//也可用此定义自适应宽度
                  allowBlank:false,// 不允许为空
                  blankText:'帐户不能为空'// 错误提示内容
               },{
                  inputType:'password',
                  fieldLabel: '密码',
                  // anchor:'95%',
                  name: 'pws',
                  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 < 13; i++){
                              setTimeout(f(i), i*150);
                           }

                          // 提交到服务器操作
                          simple.form.doAction('submit',{
                            url:'servlet/loginServer',// 文件路径
                            method:'post',// 提交方法post或get
                            params:'',
                            // 提交成功的回调函数
                            success:function(form,action){
                            
                                 if (action.result.msg=='ok') {
                                   Ext.Msg.alert('登陆成功',action.result.msg);
                                   // document.location='index.html';
                                 } else {
                                    Ext.Msg.alert('登陆错误',action.result.msg);
                                 }
                            },
                            // 提交失败的回调函数
                            failure:function(){
                                 Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
                            }
                          });
                        }
               }

            },{
               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:false,// 禁止关闭
                  collapsible:true,// 可折叠
                  plain: true,
                  buttonAlign:'center',
                  items:simple// 将表单作为窗体元素嵌套布局
               });
               win.show();// 显示窗体

       });

效果图

评论

5 楼 wx819648354 2014-04-10  

我想问下，控制进度速度是为了什么呢

4 楼 lym6520 2014-04-09  

wx819648354 写道

能帮我看下这段代码的问题吗，提交之后就会显示说我的ext-base.js参数无效

buttons:[{  
  text:"登录",
      type:'submit',
      handler:function(){
      if(form.form.isValid()){
      form.form.submit({
      waitTitle:"提示",
      waitMsg:"正在进行登录验证，请稍后..."
      });
      form.form.doAction('submit',{
      url:'login/LoginServer',
      method:'post'
      });
      }
      }
     
    }]

[*]
[/list]

调用submit后就自动去掉用doAction了，
有 form.form.submit 就不需要 form.form.doAction

3 楼 wx819648354 2014-04-09  

能帮我看下这段代码的问题吗，提交之后就会显示说我的ext-base.js参数无效

buttons:[{  
  text:"登录",
      type:'submit',
      handler:function(){
      if(form.form.isValid()){
      form.form.submit({
      waitTitle:"提示",
      waitMsg:"正在进行登录验证，请稍后..."
      });
      form.form.doAction('submit',{
      url:'login/LoginServer',
      method:'post'
      });
      }
      }
     
    }]

[/list]

2 楼 lym6520 2014-04-09  

wx819648354 写道

我是Ext终极小菜鸟，我想问下Ext提交Action地址，是必须需要doAction这个对象的吗。

Ext表单提交和加载都是通过doAction来处理的

1 楼 wx819648354 2014-04-09  

我是Ext终极小菜鸟，我想问下Ext提交Action地址，是必须需要doAction这个对象的吗。