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( ),
                                        },

類似這樣的參數，就很方便。