本文介绍如何使用 ExtJS 实现 FORM 的编辑功能，包括创建表单、实现 ComboBox 组件、设置数据源及提交表单的具体步骤。通过详细代码示例展示了如何将前后端相结合，完成项目的新增记录功能。
我们新增记录功能的步骤如下：
1.新建FORM
FORM的建立是用ExtJS实现在GridForProjectLists.js文件中的。注意的是，我同时做了个ExtJS的ComboBox
ComboBox实现:
1
varstoreDept=newExt.data.Store(
{
2
proxy:newExt.data.HttpProxy({
3
url:"../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
13varstoreStatus=newExt.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});
23storeStatus.load();
varstoreDept=newExt.data.Store({2
proxy:newExt.data.HttpProxy({3
url:"../Projects/JsonDataSource/DepartmentInfo.aspx"4
}),5
//createreaderthatreadstheprojectrecords6
reader:newExt.data.JsonReader({},[7
{name:'Text',type:'string'},8
{name:'Value',type:'string'}9
])10
});11
storeDept.load();12
13
varstoreStatus=newExt.data.Store({14
proxy:newExt.data.HttpProxy({15
url:"../Projects/JsonDataSource/GetProjectStatus.aspx"16
}),17
//createreaderthatreadstheprojectrecords18
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<!--<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%>
1usingSystem;
2usingSystem.Data;
3usingSystem.Configuration;
4usingSystem.Collections;
5usingSystem.Linq;
6usingSystem.Web;
7usingSystem.Web.Security;
8usingSystem.Web.UI;
9usingSystem.Web.UI.WebControls;
10usingSystem.Web.UI.WebControls.WebParts;
11usingSystem.Web.UI.HtmlControls;
12usingSystem.Xml.Linq;
13usingBusinessObject.Projects;
14usingDatabase;
15usingWeb.Components;
16namespaceWeb.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
usingSystem;2
usingSystem.Data;3
usingSystem.Configuration;4
usingSystem.Collections;5
usingSystem.Linq;6
usingSystem.Web;7
usingSystem.Web.Security;8
usingSystem.Web.UI;9
usingSystem.Web.UI.WebControls;10
usingSystem.Web.UI.WebControls.WebParts;11
usingSystem.Web.UI.HtmlControls;12
usingSystem.Xml.Linq;13
usingBusinessObject.Projects;14
usingDatabase;15
usingWeb.Components;16
namespaceWeb.Projects.JsonDataSource17
{18
publicpartialclassGetProjectStatus:System.Web.UI.Page19
{20
protectedstringstrJsonSource=string.Empty;21
protectedvoidPage_Load(objectsender,EventArgse)22
{23
GetJsonSouceString();24
}25
26
//这些不用我注释了吧，呵呵27
privatevoidGetJsonSouceString()28
{29
ProjectDictDataContextdb=newProjectDictDataContext();30
varquery=frompindb.PROJECT_DICTs31
wherep.DICT_TYPE=="003"32
selectnew{p.NAME,p.CODE};33
strJsonSource=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 /> -->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:false15
},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:false45
},46
47
newExt.form.DateField({48
fieldLabel:' 预计开始时间',49
name:'startTime',50
width:20051
//allowBlank:false52
}),53
newExt.form.DateField({54
fieldLabel:' 实际开始时间',55
name:'RealStartTime',56
width:20057
//allowBlank:false58
}),59
newExt.form.ComboBox({60
fieldLabel:' 当前状态',61
name:'Status',//用来取text62
store:storeStatus,63
displayField:'NAME',64
valueField:'CODE',65
width:200,66
hiddenName:'StatusNo',//用来取value67
//typeAhead:true,68
mode:'remote',69
triggerAction:'all',70
emptyText:'请选择项目状态',71
selectOnFocus:true72
})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:200106
//allowBlank:false107
}),108
newExt.form.DateField({109
fieldLabel:' 实际结束时间',110
name:'RealEndTime',111
width:200112
//allowBlank:false113
})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 /> -->1
functionshowAddPanel(){2
//createthewindowonthefirstclickandreuseonsubsequentclicks3
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
addForm28
]29
},{30
title:'跟踪信息',31
layout:'fit',32
cls:'x-plain',33
items:[34
gdNewProjectTracks35
]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:false51
},{52
text:'取消',53
handler:function(){54
newwin.hide();55
}56
}]57
});58
newwin.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 /> -->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
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.ERROR29
});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 /> -->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.OperProjects15
{16
publicpartialclassAddProjectBaseInfo:System.Web.UI.Page17
{18
protectedstringstrJson=string.Empty;19
protectedvoidPage_Load(objectsender,EventArgse)20
{21
AddProject();22
}23
24
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
try40
{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
65
}66
}67
需要注意的是AddProjectBaseInfo.aspx.cs中需要返回JSON格式的success的true/false给doSave方法中调用。至此，新增功能已实现。
实现效果图如下：
Form方式的编辑功能不再提供，大家可以参考新增功能来实现，欲知ExtJS的其它功能，且听下回分解……
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
