|
Posted on
2007-11-27 22:44
韦小宝是我的老乡
阅读( 20547)
评论()
编辑
收藏
举报
我的ExtJS与.NET结合开发实例系列:
1.ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)
2.ExtJS与.NET结合开发实例(Grid之批量删除篇)
首先感谢大家对两篇文章的关注,我将尽力帮助需要用到ExtJS开发的朋友去解决开发中遇到
我的 ExtJS与.NET结合开发实例系列:
1. ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)
2. ExtJS与.NET结合开发实例(Grid之批量删除篇)
感谢大家对两篇文章的关注,我将尽力帮助需要用到ExtJS开发的朋友去解决开发中遇到的问题 ![](/CuteSoft_Client/CuteEditor/images/emhug.gif) .
言归正传,我们新增记录功能的步骤如下:
1.新建FORM
FORM的建立是用ExtJS实现在 GridForProjectLists.js文件中的。注意的是,我同时做了个ExtJS的ComboBox
ComboBox实现:
1![](/Images/OutliningIndicators/ExpandedBlockStart.gif) var storeDept = new Ext.data.Store( {
2![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) proxy: new Ext.data.HttpProxy( {
3 url:"../Projects/JsonDataSource/DepartmentInfo.aspx"
4 }),
5 // create reader that reads the project records
6![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) reader: new Ext.data.JsonReader( {},[
7![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {name:'Text',type:'string'},
8![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {name:'Value',type:'string'}
9 ])
10 });
11 storeDept.load();
12
13![](/Images/OutliningIndicators/ExpandedBlockStart.gif) var storeStatus = new Ext.data.Store( {
14![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) proxy: new Ext.data.HttpProxy( {
15 url:"../Projects/JsonDataSource/GetProjectStatus.aspx"
16 }),
17 // create reader that reads the project records
18![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) reader: new Ext.data.JsonReader( {},[
19![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {name:'NAME',type:'string'},
20![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {name:'CODE',type:'string'}
21 ])
22 });
23 storeStatus.load();
这里的实现了两个ComboBox,一个是部门选择,一个是状态选择。我这里只说其中一个数据源的写法,即 GetProjectStatus.aspx。
新建 GetProjectStatus.aspx文件,代码如下:
![](/Images/OutliningIndicators/ContractedBlock.gif) 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![](/Images/OutliningIndicators/ExpandedBlockStart.gif) ![](/Images/OutliningIndicators/ContractedBlock.gif) {
18 public partial class GetProjectStatus : System.Web.UI.Page
19![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {
20 protected string strJsonSource = string.Empty;
21 protected void Page_Load(object sender, EventArgs e)
22![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {
23 GetJsonSouceString();
24 }
25
26 //这些不用我注释了吧,呵呵
27 private void GetJsonSouceString()
28![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {
29 ProjectDictDataContext db = new ProjectDictDataContext();
30 var query = from p in db.PROJECT_DICTs
31 where p.DICT_TYPE == "003"
32![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) select new { p.NAME, p.CODE };
33 strJsonSource = query.ToJSON();
34 }
35 }
36 }
37![](/Images/OutliningIndicators/None.gif)
接下来,回到 GridForProjectLists.js文件上,我们实现FORM,代码如下:
![](/Images/OutliningIndicators/ContractedBlock.gif) Form表单实现
1![](/Images/OutliningIndicators/ExpandedBlockStart.gif) var addForm = new Ext.FormPanel( {
2 layout:'column',
3![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) items: [ {
4![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) items: {
5 columnWidth:.5,
6 layout: 'form',
7 border:false,
8 items: [
9![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {
10 xtype:'textfield',
11 fieldLabel: ' 合同编号',
12 width:200,
13 name: 'contractno',
14 allowBlank:false
15 },
16![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {
17 xtype:'textfield',
18 fieldLabel: ' 项目名称',
19 width:200,
20 name: 'projectname',
21 allowBlank:false,
22 blankText: '项目名称不能为空!'
23 },
24![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Ext.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![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) , {
40 xtype:'textfield',
41 fieldLabel: ' 项目经理',
42 width:200,
43 name: 'projectmanager',
44 allowBlank:false
45 },
46
47![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Ext.form.DateField( {
48 fieldLabel: ' 预计开始时间',
49 name: 'startTime',
50 width:200
51 //allowBlank:false
52 }),
53![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Ext.form.DateField( {
54 fieldLabel: ' 实际开始时间',
55 name: 'RealStartTime',
56 width:200
57 //allowBlank:false
58 }),
59![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Ext.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![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) }, {
76![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) items: {
77 columnWidth:.5,
78 layout: 'form',
79 border:false,
80 items: [
81![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {
82 xtype:'textfield',
83 fieldLabel: ' 项目编号',
84 width:200,
85 name: 'projectno',
86 allowBlank:false,
87 blankText: '项目编号不能为空!'
88![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) }, {
89 xtype:'textfield',
90 fieldLabel: ' 项目简称',
91 width:200,
92 name: 'projectalias'
93![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) }, {
94 //右边空一格
95 },
96![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {
97 xtype:'textfield',
98 fieldLabel: ' 开发经理',
99 width:200,
100 name: 'projectleader'
101 },
102![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Ext.form.DateField( {
103 fieldLabel: ' 预计结束时间',
104 name: 'endTime',
105 width:200
106 //allowBlank:false
107 }),
108![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Ext.form.DateField( {
109 fieldLabel: ' 实际结束时间',
110 name: 'RealEndTime',
111 width:200
112 //allowBlank:false
113 })
114 ]
115 }
116 }]
117 });
在第一篇文章中,提到ADD的按钮需要实现showAddPanel的方法,代码如下:
![](/Images/OutliningIndicators/ContractedBlock.gif) 新增的界面
1![](/Images/OutliningIndicators/ExpandedBlockStart.gif) function showAddPanel() {
2 // create the window on the first click and reuse on subsequent clicks
3![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) items: new Ext.TabPanel( {
14 activeTab: 0,
15 width:683,
16 height:253,
17![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) defaults: {bodyStyle:'padding:10px'},
18 xtype:'tabpanel',
19 plain:true,
20![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) defaults: { frame:true},
21 closable:true,
22![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) items:[ {
23 title: '基本信息',
24 layout:'column',
25 cls:'x-plain',
26 items:[
27 addForm
28 ]
29![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) }, {
30 title: '跟踪信息',
31 layout:'fit',
32 cls:'x-plain',
33 items: [
34 gdNewProjectTracks
35 ]
36![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) }, {
37 title: '备注',
38 cls:'x-plain',
39 layout:'fit',
40![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) items: {
41 xtype:'htmleditor',
42 id:'memo',
43 fieldLabel:'备注'
44 }
45 }]}),
46![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) buttons: [ {
47 id:'btnSave',
48 text:'保 存',
49 handler:doSave,
50 disabled:false
51![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) }, {
52 text: '取 消',
53![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) handler: function() {
54 newwin.hide();
55 }
56 }]
57 });
58 newwin.show(this);
59 }
Form实现的最后一步是提交按钮的实现:
![](/Images/OutliningIndicators/ContractedBlock.gif) Submit
1 function doSave()
2![](/Images/OutliningIndicators/ExpandedBlockStart.gif) {
3![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) Ext.MessageBox.show( {
4 msg: '正在保存数据, 请稍侯 ',
5 progressText: '正在保存中 ',
6 width:300,
7 wait:true,
8![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) waitConfig: {interval:200},
9 icon:'ext-mb-save',
10 nimEl: 'btnSave'
11 });
12
13![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) addForm.getForm().submit( {
14 url:'../Projects/OperProjects/AddProjectBaseInfo.aspx',
15 method:'POST',
16![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) success: function(form, action) {
17 Ext.MessageBox.hide();
18 Ext.MessageBox.alert('提示', '数据保存成功!');
19 newwin.hide();
20![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) ds.load( {params: {start:0, limit:25}});
21 },
22![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) failure: function(form, action) {
23 Ext.MessageBox.hide();
24![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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 %>
![](/Images/OutliningIndicators/ContractedBlock.gif) AddProjectBaseInfo.aspx.cs
1 using System;
2 using System.Collections;
3 using System.Configuration;
4 using System.Data;
5 using System.Linq;
6 using System.Web;
7 using System.Web.Security;
8 using System.Web.UI;
9 using System.Web.UI.HtmlControls;
10 using System.Web.UI.WebControls;
11 using System.Web.UI.WebControls.WebParts;
12 using System.Xml.Linq;
13 using BusinessObject.Projects;
14 namespace Web.Projects.OperProjects
15![](/Images/OutliningIndicators/ExpandedBlockStart.gif) ![](/Images/OutliningIndicators/ContractedBlock.gif) {
16 public partial class AddProjectBaseInfo : System.Web.UI.Page
17![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {
18 protected string strJson = string.Empty;
19 protected void Page_Load(object sender, EventArgs e)
20![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {
21 AddProject();
22 }
23![](/Images/OutliningIndicators/InBlock.gif)
24 private void AddProject()
25![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {
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![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {
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![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif) {
60 string strMsg = ex.Message;
61 strJson = @"{success: false}";
62 }
63 }
64![](/Images/OutliningIndicators/InBlock.gif)
65 }
66 }
67![](/Images/OutliningIndicators/None.gif)
需要注意的是AddProjectBaseInfo.aspx.cs中需要返回JSON格式的success的true/false给doSave方法中调用。至此,新增功能已实现。
实现效果图如下:
![](/images/cnblogs_com/cmsoft/Insert.JPG)
![](/images/cnblogs_com/cmsoft/Insert_1.JPG)
![](/images/cnblogs_com/cmsoft/Insert_2.JPG)
Form方式的编辑功能不再提供,大家可以参考新增功能来实现,欲知ExtJS的其它功能,且听下回分解……
|