ExtJS与.NET结合开发实例(Grid之新增——Form提交篇)

我们新增记录功能的步骤如下：
    1.新建FORM
      FORM的建立是用ExtJS实现在GridForProjectLists.js文件中的。注意的是，我同时做了个ExtJS的ComboBox
      ComboBox实现:     

 1 var  storeDept  =   new  Ext.data.Store( {
 2         proxy: new Ext.data.HttpProxy({
 3                url:"../Projects/JsonDataSource/DepartmentInfo.aspx"
 4            }),
 5            // create reader that reads the project records
 6            reader: new Ext.data.JsonReader({},[
 7                {name:'Text',type:'string'},
 8                {name:'Value',type:'string'}
 9         ])
10    } );
11     storeDept.load(); 
12     
13       var  storeStatus  =   new  Ext.data.Store( {
14         proxy: new Ext.data.HttpProxy({
15                url:"../Projects/JsonDataSource/GetProjectStatus.aspx"
16            }),
17            // create reader that reads the project records
18            reader: new Ext.data.JsonReader({},[
19                {name:'NAME',type:'string'},
20                {name:'CODE',type:'string'}
21         ])
22    } );
23     storeStatus.load();

   这里的实现了两个ComboBox,一个是部门选择，一个是状态选择。我这里只说其中一个数据源的写法，即GetProjectStatus.aspx。
   新建GetProjectStatus.aspx文件，代码如下：

GetProjectStatus.aspx
1<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetProjectStatus.aspx.cs" Inherits="Web.Projects.JsonDataSource.GetProjectStatus" %>
2<%=strJsonSource %>

 1 using  System;
 2 using  System.Data;
 3 using  System.Configuration;
 4 using  System.Collections;
 5 using  System.Linq;
 6 using  System.Web;
 7 using  System.Web.Security;
 8 using  System.Web.UI;
 9 using  System.Web.UI.WebControls;
10 using  System.Web.UI.WebControls.WebParts;
11 using  System.Web.UI.HtmlControls;
12 using  System.Xml.Linq;
13 using  BusinessObject.Projects;
14 using  Database;
15 using  Web.Components;
16 namespace  Web.Projects.JsonDataSource
17 {
18    public partial class GetProjectStatus : System.Web.UI.Page
19    {
20        protected string strJsonSource = string.Empty;
21        protected void Page_Load(object sender, EventArgs e)
22        {
23            GetJsonSouceString();
24        }
25        
26        //这些不用我注释了吧，呵呵
27        private void GetJsonSouceString()
28        {
29            ProjectDictDataContext db = new ProjectDictDataContext();
30            var query = from p in db.PROJECT_DICTs
31                        where p.DICT_TYPE == "003"
32                        select new { p.NAME, p.CODE };
33            strJsonSource = query.ToJSON();
34        }
35    }
36}
37

接下来，回到GridForProjectLists.js文件上，我们实现FORM，代码如下：
   

Form表单实现
  1var addForm = new Ext.FormPanel({
  2        layout:'column',
  3        items: [{
  4                 items: {
  5                       columnWidth:.5,
  6                        layout: 'form',
  7                        border:false,
  8                        items: [
  9                        {
 10                            xtype:'textfield',
 11                            fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合同编号',
 12                            width:200,
 13                            name: 'contractno',
 14                            allowBlank:false
 15                        },
 16                        {
 17                            xtype:'textfield',
 18                            fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;项目名称',
 19                            width:200,
 20                            name: 'projectname',
 21                            allowBlank:false,
 22                            blankText: '项目名称不能为空！'
 23                        },
 24                        new Ext.form.ComboBox({
 25                        fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所属部门',
 26                        name:'dept',
 27                        store: storeDept,
 28                        displayField:'Text',
 29                        valueField: 'Value',
 30                        hiddenName:'deptno',
 31                        width: 200,
 32                        //typeAhead: true,
 33                        mode: 'remote',
 34                        triggerAction: 'all',
 35                        emptyText:'请选择部门',
 36                        selectOnFocus:true//,
 37                        //applyTo: 'local-states'
 38                        })
 39                        ,{
 40                            xtype:'textfield',
 41                            fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;项目经理',
 42                            width:200,
 43                            name: 'projectmanager',
 44                            allowBlank:false
 45                        },
 46                        
 47                         new Ext.form.DateField({
 48                            fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预计开始时间',
 49                            name: 'startTime',
 50                            width:200
 51                            //allowBlank:false
 52                        }),
 53                         new Ext.form.DateField({
 54                            fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实际开始时间',
 55                            name: 'RealStartTime',
 56                            width:200
 57                            //allowBlank:false
 58                        }),
 59                        new Ext.form.ComboBox({
 60                        fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前状态',
 61                        name:'Status',     //用来取text
 62                        store: storeStatus,
 63                        displayField:'NAME',
 64                        valueField: 'CODE',
 65                        width: 200,
 66                        hiddenName:'StatusNo',  //用来取value
 67                        //typeAhead: true,
 68                        mode: 'remote',
 69                        triggerAction: 'all',
 70                        emptyText:'请选择项目状态',
 71                        selectOnFocus:true
 72                        })
 73                        ]
 74            }
 75        }, {
 76            items: {
 77                        columnWidth:.5,
 78                        layout: 'form',
 79                        border:false,
 80                        items: [
 81                          {
 82                                xtype:'textfield',
 83                                fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;项目编号',
 84                                width:200,
 85                                name: 'projectno',
 86                                allowBlank:false,
 87                                 blankText: '项目编号不能为空！'
 88                            },{
 89                                xtype:'textfield',
 90                                fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;项目简称',
 91                                width:200,
 92                                name: 'projectalias'
 93                            },{
 94                               //右边空一格
 95                            },
 96                            {
 97                                xtype:'textfield',
 98                                fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开发经理',
 99                                width:200,
100                                name: 'projectleader'
101                            },
102                             new Ext.form.DateField({
103                                fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预计结束时间',
104                                name: 'endTime',
105                                width:200
106                                //allowBlank:false
107                            }),
108                             new Ext.form.DateField({
109                                fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实际结束时间',
110                                name: 'RealEndTime',
111                                width:200
112                                //allowBlank:false
113                            })
114                        ]
115                }
116            }]
117        });    

在第一篇文章中，提到ADD的按钮需要实现showAddPanel的方法，代码如下：

新增的界面
 1    function showAddPanel(){
 2            // create the window on the first click and reuse on subsequent clicks
 3           newwin = new Ext.Window({
 4          xtype:'window',
 5                buttonAlign : 'right',
 6                closable:true,
 7                layout:'fit',
 8                modal: 'true', 
 9                width:700,
10                height:450,
11                closeAction:'hide',
12                plain: true,
13                items: new Ext.TabPanel({
14                activeTab: 0,
15                width:683,
16                height:253,
17                defaults:{bodyStyle:'padding:10px'},
18                xtype:'tabpanel',
19                plain:true,
20                defaults:{ frame:true},
21                closable:true,
22                items:[{
23                title: '基本信息',
24                layout:'column',
25                cls:'x-plain',             
26                items:[
27                      addForm
28                  ] 
29                },{
30                    title: '跟踪信息',
31                    layout:'fit',
32                    cls:'x-plain',
33                    items: [
34                        gdNewProjectTracks
35                    ]
36                },{
37                    title: '备注',
38                    cls:'x-plain',
39                    layout:'fit',
40                    items: {
41                        xtype:'htmleditor',
42                        id:'memo',
43                        fieldLabel:'备注'
44                    }
45                }]}),
46                buttons: [{
47                    id:'btnSave',
48                    text:'保 存',
49                    handler:doSave,
50                    disabled:false
51                },{
52                    text: '取 消',
53                    handler: function(){
54                        newwin.hide();
55                    }
56                }]
57            });
58        newwin.show(this); 
59    } 

Form实现的最后一步是提交按钮的实现：
 

Submit
 1 function doSave()
 2    {
 3         Ext.MessageBox.show({
 4                   msg: '正在保存数据, 请稍侯',
 5                   progressText: '正在保存中',
 6                   width:300,
 7                   wait:true,
 8                   waitConfig: {interval:200},
 9                   icon:'ext-mb-save',
10                   nimEl: 'btnSave'
11                 });
12                 
13           addForm.getForm().submit({
14            url:'../Projects/OperProjects/AddProjectBaseInfo.aspx',
15            method:'POST',
16            success: function(form, action){
17                Ext.MessageBox.hide();
18                Ext.MessageBox.alert('提示', '数据保存成功！');
19                newwin.hide();
20               ds.load({params:{start:0, limit:25}});
21            },
22            failure: function(form, action){
23                 Ext.MessageBox.hide();
24                 Ext.MessageBox.show({
25                    title:'错误',
26                    msg: '数据保存失败！',
27                    buttons: Ext.Msg.OK,
28                    icon: Ext.MessageBox.ERROR
29                });
30            }
31         });
32    }

   2.实现新增记录的功能
   从刚才的doSave方法中发现，新增功能在AddProjectBaseInfo.aspx页面中实现,代码如下：

1 <% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " AddProjectBaseInfo.aspx.cs "  Inherits = " Web.Projects.OperProjects. AddProjectBaseInfo "   %> 2 <%= strJson  %>

 

AddProjectBaseInfo.aspx.cs
 1using System;
 2using System.Collections;
 3using System.Configuration;
 4using System.Data;
 5using System.Linq;
 6using System.Web;
 7using System.Web.Security;
 8using System.Web.UI;
 9using System.Web.UI.HtmlControls;
10using System.Web.UI.WebControls;
11using System.Web.UI.WebControls.WebParts;
12using System.Xml.Linq;
13using BusinessObject.Projects;
14namespace Web.Projects.OperProjects
15{
16    public partial class AddProjectBaseInfo : System.Web.UI.Page
17    {
18        protected string strJson = string.Empty;
19        protected void Page_Load(object sender, EventArgs e)
20        {
21            AddProject();
22        }
23
24        private void AddProject()
25        {
26            //这里我就不校验数据正确性了
27            string ProjectName = Request.Form["projectname"];
28            string ContractNo = Request.Form["contractno"];
29            string ProjectNo = Request.Form["projectno"];
30            string DeptNo = Request.Form["deptno"];
31            string PM = Request.Form["projectmanager"];
32            string ProjectAlias = Request.Form["projectalias"];
33            string PL = Request.Form["projectleader"];
34            DateTime  StartTime =DateTime.Parse(Request.Form["startTime"]);
35            DateTime EndTime =DateTime.Parse(Request.Form["endTime"]);
36            DateTime RealStartTime =  DateTime.Parse(Request.Form["RealStartTime"]);
37            DateTime RealEndTime =  DateTime.Parse(Request.Form["RealEndTime"]);
38            string Status = Request.Form["StatusNo"];
39            try
40            {
41                ProjectBaseInfoDataContext db = new ProjectBaseInfoDataContext();
42                PROJECT_BASE_INFO project = new PROJECT_BASE_INFO();
43                project.PROJECT_ALIAS = ProjectAlias;
44                project.PROJECT_CURRENT_STATUS = Status;
45                project.PROJECT_DEPT_NO = DeptNo;
46                project.PROJECT_FINISH_DATE = EndTime;
47                project.PROJECT_LEADER = PL;
48                project.PROJECT_MANAGER = PM;
49                project.PROJECT_NAME = ProjectName;
50                project.PROJECT_NO = ProjectNo;
51                project.PROJECT_REAL_FINISH_DATE = RealEndTime;
52                project.PROJECT_REAL_START_DATE = RealStartTime;
53                project.PROJECT_START_DATE = StartTime;
54                db.PROJECT_BASE_INFOs.InsertOnSubmit(project);
55                db.SubmitChanges();
56                strJson = @"{success: true}";
57            }
58            catch(Exception ex)
59            {
60                string strMsg = ex.Message;
61                strJson = @"{success: false}";
62            }
63        }
64
65    }
66}
67

需要注意的是AddProjectBaseInfo.aspx.cs中需要返回JSON格式的success的true/false给doSave方法中调用。至此，新增功能已实现。
    实现效果图如下：

    

    Form方式的编辑功能不再提供，大家可以参考新增功能来实现，欲知ExtJS的其它功能，且听下回分解……