ExtJS与.NET结合开发实例(Grid之新增——Form提交篇)-优快云博客

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

var storeDept = new Ext.data.Store(

{
2

proxy:newExt.data.HttpProxy(

{
3

url:"../Projects/JsonDataSource/DepartmentInfo.aspx"
4

}),
5

//createreaderthatreadstheprojectrecords
6

reader:newExt.data.JsonReader(

{},[
7

{name:'Text',type:'string'},
8

{name:'Value',type:'string'}
9

])
10

} );
11

storeDept.load();
12

var storeStatus = new Ext.data.Store(

{
14

proxy:newExt.data.HttpProxy(

{
15

url:"../Projects/JsonDataSource/GetProjectStatus.aspx"
16

}),
17

//createreaderthatreadstheprojectrecords
18

reader: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
1

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

<%=strJsonSource%>

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

publicpartialclassGetProjectStatus:System.Web.UI.Page
19

{
20

protectedstringstrJsonSource=string.Empty;
21

protectedvoidPage_Load(objectsender,EventArgse)
22

{
23

GetJsonSouceString();
24

}
25

//这些不用我注释了吧，呵呵
27

privatevoidGetJsonSouceString()
28

{
29

ProjectDictDataContextdb=newProjectDictDataContext();
30

varquery=frompindb.PROJECT_DICTs
31

wherep.DICT_TYPE=="003"
32

selectnew

{p.NAME,p.CODE};
33

strJsonSource=query.ToJSON();
34

}
35

}
36

}
37

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

Form表单实现
1

varaddForm=newExt.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:'      合同编号',
12

width:200,
13

name:'contractno',
14

allowBlank:false
15

},
16

{
17

xtype:'textfield',
18

fieldLabel:'      项目名称',
19

width:200,
20

name:'projectname',
21

allowBlank:false,
22

blankText:'项目名称不能为空！'
23

},
24

newExt.form.ComboBox(

{
25

fieldLabel:'      所属部门',
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:'      项目经理',
42

width:200,
43

name:'projectmanager',
44

allowBlank:false
45

},
46

newExt.form.DateField(

{
48

fieldLabel:'      预计开始时间',
49

name:'startTime',
50

width:200
51

//allowBlank:false
52

}),
53

newExt.form.DateField(

{
54

fieldLabel:'      实际开始时间',
55

name:'RealStartTime',
56

width:200
57

//allowBlank:false
58

}),
59

newExt.form.ComboBox(

{
60

fieldLabel:'      当前状态',
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:'      项目编号',
84

width:200,
85

name:'projectno',
86

allowBlank:false,
87

blankText:'项目编号不能为空！'
88

{
89

xtype:'textfield',
90

fieldLabel:'      项目简称',
91

width:200,
92

name:'projectalias'
93

{
94

//右边空一格
95

},
96

{
97

xtype:'textfield',
98

fieldLabel:'      开发经理',
99

width:200,
100

name:'projectleader'
101

},
102

newExt.form.DateField(

{
103

fieldLabel:'      预计结束时间',
104

name:'endTime',
105

width:200
106

//allowBlank:false
107

}),
108

newExt.form.DateField(

{
109

fieldLabel:'      实际结束时间',
110

name:'RealEndTime',
111

width:200
112

//allowBlank:false
113

})
114

]
115

}
116

}]
117

});

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

新增的界面
1

functionshowAddPanel()

{
2

//createthewindowonthefirstclickandreuseonsubsequentclicks
3

newwin=newExt.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:newExt.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

functiondoSave()
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

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页面中实现,代码如下：

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

<%= strJson %>

AddProjectBaseInfo.aspx.cs
1

usingSystem;
2

usingSystem.Collections;
3

usingSystem.Configuration;
4

usingSystem.Data;
5

usingSystem.Linq;
6

usingSystem.Web;
7

usingSystem.Web.Security;
8

usingSystem.Web.UI;
9

usingSystem.Web.UI.HtmlControls;
10

usingSystem.Web.UI.WebControls;
11

usingSystem.Web.UI.WebControls.WebParts;
12

usingSystem.Xml.Linq;
13

usingBusinessObject.Projects;
14

namespaceWeb.Projects.OperProjects
15

{
16

publicpartialclassAddProjectBaseInfo:System.Web.UI.Page
17

{
18

protectedstringstrJson=string.Empty;
19

protectedvoidPage_Load(objectsender,EventArgse)
20

{
21

AddProject();
22

}
23

privatevoidAddProject()
25

{
26

//这里我就不校验数据正确性了
27

stringProjectName=Request.Form["projectname"];
28

stringContractNo=Request.Form["contractno"];
29

stringProjectNo=Request.Form["projectno"];
30

stringDeptNo=Request.Form["deptno"];
31

stringPM=Request.Form["projectmanager"];
32

stringProjectAlias=Request.Form["projectalias"];
33

stringPL=Request.Form["projectleader"];
34

DateTimeStartTime=DateTime.Parse(Request.Form["startTime"]);
35

DateTimeEndTime=DateTime.Parse(Request.Form["endTime"]);
36

DateTimeRealStartTime=DateTime.Parse(Request.Form["RealStartTime"]);
37

DateTimeRealEndTime=DateTime.Parse(Request.Form["RealEndTime"]);
38

stringStatus=Request.Form["StatusNo"];
39

try
40

{
41

ProjectBaseInfoDataContextdb=newProjectBaseInfoDataContext();
42

PROJECT_BASE_INFOproject=newPROJECT_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(Exceptionex)
59

{
60

stringstrMsg=ex.Message;
61

strJson=@"{success:false}";
62

}
63

}
64

}
66

}
67

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

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