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

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

1 var storeDept = new Ext.data.Store( {
2proxy:newExt.data.HttpProxy({
3url:"../Projects/JsonDataSource/DepartmentInfo.aspx"
4}),
5//createreaderthatreadstheprojectrecords
6reader:newExt.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( {
14proxy:newExt.data.HttpProxy({
15url:"../Projects/JsonDataSource/GetProjectStatus.aspx"
16}),
17//createreaderthatreadstheprojectrecords
18reader:newExt.data.JsonReader({},[
19{name:'NAME',type:'string'},
20{name:'CODE',type:'string'}
21])
22} );
23 storeStatus.load();

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

GetProjectStatus.aspx
<!--<br /><br /> <br /><br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /><br /> <a href="http://www.CodeHighlighter.com/" title="http://www.CodeHighlighter.com/">http://www.CodeHighlighter.com/</a><br /><br /> <br /><br /> -->1<%@PageLanguage="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 {
18publicpartialclassGetProjectStatus:System.Web.UI.Page
19{
20protectedstringstrJsonSource=string.Empty;
21protectedvoidPage_Load(objectsender,EventArgse)
22{
23GetJsonSouceString();
24}
25
26//这些不用我注释了吧，呵呵
27privatevoidGetJsonSouceString()
28{
29ProjectDictDataContextdb=newProjectDictDataContext();
30varquery=frompindb.PROJECT_DICTs
31wherep.DICT_TYPE=="003"
32selectnew{p.NAME,p.CODE};
33strJsonSource=query.ToJSON();
34}
35}
36}
37

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

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

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

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

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

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

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

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

AddProjectBaseInfo.aspx.cs
<!--<br /><br /> <br /><br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /><br /> <a href="http://www.CodeHighlighter.com/" title="http://www.CodeHighlighter.com/">http://www.CodeHighlighter.com/</a><br /><br /> <br /><br /> -->1usingSystem;
2usingSystem.Collections;
3usingSystem.Configuration;
4usingSystem.Data;
5usingSystem.Linq;
6usingSystem.Web;
7usingSystem.Web.Security;
8usingSystem.Web.UI;
9usingSystem.Web.UI.HtmlControls;
10usingSystem.Web.UI.WebControls;
11usingSystem.Web.UI.WebControls.WebParts;
12usingSystem.Xml.Linq;
13usingBusinessObject.Projects;
14namespaceWeb.Projects.OperProjects
15{
16publicpartialclassAddProjectBaseInfo:System.Web.UI.Page
17{
18protectedstringstrJson=string.Empty;
19protectedvoidPage_Load(objectsender,EventArgse)
20{
21AddProject();
22}
23
24privatevoidAddProject()
25{
26//这里我就不校验数据正确性了
27stringProjectName=Request.Form["projectname"];
28stringContractNo=Request.Form["contractno"];
29stringProjectNo=Request.Form["projectno"];
30stringDeptNo=Request.Form["deptno"];
31stringPM=Request.Form["projectmanager"];
32stringProjectAlias=Request.Form["projectalias"];
33stringPL=Request.Form["projectleader"];
34DateTimeStartTime=DateTime.Parse(Request.Form["startTime"]);
35DateTimeEndTime=DateTime.Parse(Request.Form["endTime"]);
36DateTimeRealStartTime=DateTime.Parse(Request.Form["RealStartTime"]);
37DateTimeRealEndTime=DateTime.Parse(Request.Form["RealEndTime"]);
38stringStatus=Request.Form["StatusNo"];
39try
40{
41ProjectBaseInfoDataContextdb=newProjectBaseInfoDataContext();
42PROJECT_BASE_INFOproject=newPROJECT_BASE_INFO();
43project.PROJECT_ALIAS=ProjectAlias;
44project.PROJECT_CURRENT_STATUS=Status;
45project.PROJECT_DEPT_NO=DeptNo;
46project.PROJECT_FINISH_DATE=EndTime;
47project.PROJECT_LEADER=PL;
48project.PROJECT_MANAGER=PM;
49project.PROJECT_NAME=ProjectName;
50project.PROJECT_NO=ProjectNo;
51project.PROJECT_REAL_FINISH_DATE=RealEndTime;
52project.PROJECT_REAL_START_DATE=RealStartTime;
53project.PROJECT_START_DATE=StartTime;
54db.PROJECT_BASE_INFOs.InsertOnSubmit(project);
55db.SubmitChanges();
56strJson=@"{success:true}";
57}
58catch(Exceptionex)
59{
60stringstrMsg=ex.Message;
61strJson=@"{success:false}";
62}
63}
64
65}
66}
67

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

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