EXTJS笔记之 Ext.form.FormPanel登录框demo
Ext.form.FormPanel的帮助文档：
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Panel
查阅手册得知：
FormPanel provides a standard container for forms. It is essentially a standard Ext.panel.Panel which automatically creates a BasicForm for managing any Ext.form.field.Field objects that are added as descendants of the panel. It also includes conveniences for configuring and working with the BasicForm and the collection of Fields.
这里主要用实现是表单验证的功能。
默认情况下，通过Ajax外部形式提交，使用Ext.form.action.Action
这里formpanel包含了Ext.form.Basic，而且Ext.form.Basic具有submit（提交表单）的方法
所以只要使用这个方法，就可以简单实现登录账户的提交。
这里查阅手册，明白submit方法，以及ajax提交后服务器返回正确与错误的json
成功：
{ "success":true, // note this is Boolean, not string "msg":"Consignment updated" }
失败：
{ "success":false, // note this is Boolean, not string "msg":"You do not have permission to perform this operation" }
Ext.form.action.Submit手册里介绍了submit的配置，http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.action.Submit
首先，构建这个formpanel
var loginform = new Ext.form.FormPanel({ renderTo: 'container', title: 'XXXXXX', labelSeparator: ":", collapsible: true, //是否下拉 width: 420, height: 180, id: 'login', labelWidth: 80, bodyStyle: 'padding:5px 5px 0 0', border: true, name: 'login', frame: true, style: { //formpanel位置 marginRight: 'auto', // marginLeft: 'auto', marginTop: '200px', marginBottom: 'auto' }, defaults: { width: 350, xtype: 'textfield' }, items: [ { fram: true, fieldLabel: "用户名", name: 'userName', xtype:'textfield', allowBlank: false, blankText: '用户名不能为空' }, { fieldLabel: "密码", name: 'password', xtype:'textfield', allowBlank: true, inputType: 'password' //blankText: '密码不能为空' } ], buttons: [ { text: '登录', handler: login }, { text: '重置内容', handler: function() { loginform.form.reset(); } }] });
接着：实现login的功能
function login() { loginform.getForm().submit({ url:'../services/Login.ashx', method: 'post', waitMsg: "正在登录......", success: function(form, action) { var loginResult = action.result.success; if (loginResult === false) { Ext.Msg.alert('提示', action.result.msg); } else { if (loginResult === true) { window.location.href = 'Main.htm'; } } }, failure: function(form, action) { form.reset(); //Ext.Msg.alter("失败"); switch (action.failureType) { case Ext.form.Action.CLIENT_INVALID: Ext.Msg.alert("错误1", "提交的表单数据无效,请检查!"); break; case Ext.form.Action.CONNECT_FAILURE: Ext.Msg.alert("错误2", "请求失败"); break; case Ext.form.Action.SERVER_INVALID: // Ext.Msg.alert("Failure", action.result.msg); Ext.Msg.alert("账号或密码错误！", action.result.msg); } } }); }
这样就是先了前端ajax的表单提交
简单后台验证：
public void ProcessRequest(HttpContext context) { //bool flag = false; string result; string name = context.Request.Params["userName"]; string pwd = context.Request.Params["password"]; System.Configuration.Configuration rootWebConfig =System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration("/PowerClient"); System.Configuration.ConnectionStringSettings connString=rootWebConfig.ConnectionStrings.ConnectionStrings["conn_string"]; if (name != "" & pwd != "") { string _cmd = "select count(*) from app_group_user where fgu_name='" + name + "'and fpassword='" + pwd + "'"; SqlConnection conn = new SqlConnection(connString.ConnectionString); conn.Open(); SqlCommand cmd = new SqlCommand(_cmd, conn); int count = 0; //count = int.Parse(cmd.ExecuteScalar().ToString()); count = Convert.ToInt32(cmd.ExecuteScalar()); if (count > 0) { //flag = true; result = "{success:true,msg:\"account right!\"}"; } else { result = "{success:false,msg:\"account error!\"}"; } context.Response.ContentType = "text/json"; context.Response.Write(result); }
总结：Ext.form.FormPanel包含的Ext.form.Basic可以轻松实现ajax方式的submit，这里
submit的配置是很丰富的，比如具有method，params，reset，timeout等设置，当然这里的textfield
的name指明了表单提交的参数，从而不用再submit中在配置params，比较的好的做法是在submit中手动配置
params，这样，当参数很多很复杂了就比较方便管理了。
url: '../services/PWR_Concentrator_Add_Update.ashx', method: 'post', waitMsg: "正在提交......", timeout:10, params: { P_Code:Ext.getCmp("Concentrator_code_field").getValue( ),//用于查询未更改前集中器fptc_id P_Concentrator_FUPLINE:Ext.getCmp("Concentrator_FUPLINE").getValue( ),//区域编码 P_Concentrator_FCODE: Ext.getCmp("Concentrator_FCODE").getValue( ), P_Concentrator_FNAME: Ext.getCmp("Concentrator_FNAME").getValue( ), P_Concentrator_FCOMM_DEVICE: Ext.getCmp("Concentrator_FCOMM_DEVICE").getValue( ), P_Concentrator_FGENERAL_NO: Ext.getCmp("Concentrator_FGENERAL_NO").getValue( ), P_Concentrator_FPHONE_NO: Ext.getCmp("Concentrator_FPHONE_NO").getValue( ), P_Concentrator_FSERVER_PORT: Ext.getCmp("Concentrator_FSERVER_PORT").getValue( ), P_Concentrator_FCONNECT_SERVER: Ext.getCmp("Concentrator_FCONNECT_SERVER").getValue( ), P_Concentrator_FASSET_ID: Ext.getCmp("Concentrator_FASSET_ID").getValue( ), P_Concentrator_FCON_FREMARK_Textarea: Ext.getCmp("Concentrator_FCON_FREMARK_Textarea").getValue( ), P_Concentrator_FMODEL_Combox: Ext.getCmp("Concentrator_FMODEL_Combox").getValue( ), P_Concentrator_FPROJECT_Combox: Ext.getCmp("Concentrator_FPROJECT_Combox").getValue( ), P_Concentrator_FCOMM_TYPE_Combox: Ext.getCmp("Concentrator_FCOMM_TYPE_Combox").getValue( ), P_Concentrator_FIND1_Combox: Ext.getCmp("Concentrator_FIND1_Combox").getValue( ), P_Concentrator_FIND2_Combox: Ext.getCmp("Concentrator_FIND2_Combox").getValue( ), P_Concentrator_FIND3_Combox: Ext.getCmp("Concentrator_FIND3_Combox").getValue( ), P_Concentrator_FMANUFACTOR_Combox: Ext.getCmp("Concentrator_FMANUFACTOR_Combox").getValue( ), P_Concentrator_FFIRST_INSTALL_TIME_Datefield: Ext.getCmp("Concentrator_FFIRST_INSTALL_TIME_Datefield").getValue( ), },
类似这样的参数，就很方便。
