Extjs form 表單的 submit

時間 2019-11-10

標籤 extjs form 表單 submit 欄目 HTML 简体版

原文原文鏈接

說明：extjs form表單的提交方式是多種多樣的，本文只是介紹其中的一種方法，本文介紹的方法可能不是完美的，可是對於通常的應用應該是沒有問題的。本文包括的主要內容有：form面板設計、form字段值的獲取、後臺處理代碼以及返回數據的獲取 c#

一、form表單設計微信

 var  panelItem = Ext.create('Ext.form.Panel', {
            border: false,
            id:'formMain',        
            layout: 'form',
            items: [
                  {
                    xtype: 'form',
                    border: false,
                    layout: 'column',
                    id:'formR1',
                    bodyStyle: 'padding-bottom:10px;',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: '用戶名',
                            labelAlign: 'right',
                            columnWidth: .3,
                            labelWidth:65,
                            name: 'userName'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '工號',
                            columnWidth: .3,
                            labelWidth: 65,
                            labelAlign: 'right',
                            name: 'workNum'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '部門',
                            labelAlign: 'right',
                            columnWidth: .3,
                            labelWidth: 65,
                            name: 'department'
                        }
                    ]
                },
                {
                    xtype: 'form',
                    border: false,
                    id: 'formR2',
                    layout: 'column',
                    bodyStyle: 'padding-bottom:10px;',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: '電話號',
                            labelAlign: 'right',
                            columnWidth: .3,
                            labelWidth: 65,
                            name: 'phone'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '職位',
                            columnWidth: .3,
                            labelWidth: 65,
                            labelAlign: 'right',
                            name: 'position'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '微信號',
                            labelAlign: 'right',
                            columnWidth: .3,
                            labelWidth: 65,
                            name: 'WeiXin'
                        }
                    ]
                }, {
                    xtype: 'form',
                    id: 'formR3',
                    border: false,
                    layout: 'column',
                    items: [
                        {
                            xtype: 'combo',
                            fieldLabel: '性別',
                            //width:245,
                            columnWidth: .3,
                            labelAlign: 'right',
                            labelWidth: 65,
                            editable: false,
                            emptyText: '--請選擇--',
                            store: genderStore,
                            queryMode: 'local',
                            displayField: 'Name',
                            valueField: 'Value',
                            name: 'sex'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '通訊地址',
                            labelAlign: 'right',                        
                            columnWidth: .6,
                            labelWidth: 65,
                            name: 'UserAddress'
                        }
                    ]
                }
            ],
          buttons: 
                  [
                    {
                        text: '保存',
                        formBind: true,//這一句代碼就是把button和form表單綁定在一塊兒
                        handler: function (btn) {                                 
                           Ext.getCmp('formMain').getForm().submit({
                                    method: 'POST',
                                    params: {
                                        //怎麼獲取form字段的值
                                        userName:  Ext.getCmp('formMain').getForm().findField('userName').getValue();//
                                        workNum = Ext.getCmp('formMain').getForm().findField('workNum').getValue();
                                        department = Ext.getCmp('formMain').getForm().findField('department').getValue();
                                        phone = Ext.getCmp('formMain').getForm().findField('phone').getValue();
                                        position = Ext.getCmp('formMain').getForm().findField('position').getValue();
                                        WeiXin = Ext.getCmp('formMain').getForm().findField('WeiXin').getValue();
                                        sex = Ext.getCmp('formMain').getForm().findField('sex').getValue();
                                        UserAddress = Ext.getCmp('formMain').getForm().findField('UserAddress').getValue();
                                            },
                                    url: 'Home/HandlerRoleAdd',
                                    waitMsg: '請稍等,正在添加',
                                    success: function (form, action) {                    
                                        if(action.result.success) {
                                          Ext.getCmp('formMain').getForm().reset();//form表單重置
                                            Ext.MessageBox.alert('提示', '添加成功!');
                                          //能夠根據返回結果，作進一步的處理
                                        
                                           // btn.ownerCt.close();這一句的做用是，若是把上面定義的form對象做爲某個窗體的item，就是關閉該窗體
                                        }
                                        else {
                                            Ext.MessageBox.alert('提示', action.result.msg);
                                        }

                                    },
                                    failure: function (form, action) {
                                        Ext.MessageBox.alert('提示', action.result.msg);
                                    }
                                });
                            
                          
                          
                        }
                    },
           {
            text: '重置',
            handler: function () {
                  Ext.getCmp('formMain').getForm().reset();//form表單重置
             
            }
        }]
        });

View Code

二、form表單中combox控件所需的storemvc

var genderStore = Ext.create("Ext.data.Store", {
            fields: ["Name", "Value"],
            data: [
                { Name: "男", Value: 1 },
                { Name: "女", Value: 2 }
            ]
        });asp.net

三、後臺代碼及返回值結構等ide

後臺是asp.net mvc c#語言開發url

 1  public ActionResult HandlerRoleAdd()
 2         {
 3               try
 4                 {
 5                    //獲取前臺傳過來的參數
 6                         string userName = string.Empty;
 7             if (Request["userName"] != null)
 8             {
 9                 userName = Request["userName"].ToString();
10             }
11             string workNum = string.Empty;
12             if (Request["workNum"] != null)
13             {
14                 workNum = Request["workNum"].ToString();
15             }
16             string department = string.Empty;
17             if (Request["department"] != null)
18             {
19                 department = Request["department"].ToString();
20             }
21 
22             string phone = string.Empty;
23             if (Request["phone"] != null)
24             {
25                 phone = Request["phone"].ToString();
26             }
27 
28             string position = string.Empty;
29             if (Request["position"] != null)
30             {
31                 position = Request["position"].ToString();
32             }
33 
34             string WeiXin = string.Empty;
35             if (Request["WeiXin"] != null)
36             {
37                 WeiXin = Request["WeiXin"].ToString();
38             }
39 
40             string sex = string.Empty;
41             if (Request["sex"] != null)
42             {
43                 sex = Request["sex"].ToString();
44             }
45 
46 
47             string UserAddress = string.Empty;
48             if (Request["UserAddress"] != null)
49             {
50                 UserAddress = Request["UserAddress"].ToString();
51             }
52 
53 
54                     string str =string.empty;
55                      //
56                      //具體業務邏輯
57                      //
58 
59                     if (string.IsNullOrEmpty(str))
60                     {
61                         result.success = false;
62                         result.msg = "失敗";
63                     }
64                     else
65                     {
66                             result.success = true;
67                             result.msg = "成功";
68                                          
69                     }
70                
71                 }
72                 catch(Exception ex)
73                 {
74                  
75                     result.success = false;
76                     result.msg = ex.Message;
77 
78                 }
79                 finally
80                 {
81                 
82                 }
83             
84             return Json(result,JsonRequestBehavior.DenyGet);
85         }