使用extJs 2.0的form提交表单（非AJAX方式）

最新推荐文章于 2025-08-08 15:43:57 发布

leeguoquan

最新推荐文章于 2025-08-08 15:43:57 发布

阅读量826

点赞数

文章标签： extjs ajax function login button 服务器

本文介绍了一个使用ExtJS框架创建的简单登录窗体示例。该示例包括了用户名与密码输入框，并设置了非AJAX表单提交功能及登录、重置按钮的事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function(){
   simple = new Ext.form.FormPanel({
   renderTo:"loginForm",
   labelWidth: 75, // label settings here cascade unless overridden
   method:'POST',
   frame:true,
   title: '登录窗口',
   bodyStyle:'padding:5px 5px 0',
   width: 300,
   defaults: {width: 200},
   defaultType: 'textfield',
   //实现非AJAX提交表单一定要加下面的两行！
   onSubmit: Ext.emptyFn,
   submit: function() {
   this.getEl().dom.action='login.do'; //连接到服务器的url地址
   this.getEl().dom.submit();
   },

   items: [{
   fieldLabel: '用户名',
   id: 'username',
   name: 'name',
   allowBlank:false,
   width:150
   },{
   fieldLabel: '密码',
   id: 'password',
   name: 'pwd',
   allowBlank:false,
   width:150,
   inputType:'password'

   }
   ],
   buttons: [{
   text: '登录',
   type:'button',
   id:'login',
   handler: login   //添加事件，执行函数为login()
   },{
   text: '重置',
   type:'reset',
   id:'clear',
   handler: reset   //添加事件，执行函数为reset()

   }
   ]
   });

  });

  function login(){
   simple.form.submit();
  }
  function reset(){
   simple.form.reset();
  }