我们新增记录功能的步骤如下：
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 %>
1using System;
2using System.Data;
3using System.Configuration;
4using System.Collections;
5using System.Linq;
6using System.Web;
7using System.Web.Security;
8using System.Web.UI;
9using System.Web.UI.WebControls;
10using System.Web.UI.WebControls.WebParts;
11using System.Web.UI.HtmlControls;
12using System.Xml.Linq;
13using BusinessObject.Projects;
14using Database;
15using Web.Components;
16namespace 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: ' 合同编号',
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 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 ,{
40 xtype:'textfield',
41 fieldLabel: ' 项目经理',
42 width:200,
43 name: 'projectmanager',
44 allowBlank:false
45 },
46
47 new Ext.form.DateField({
48 fieldLabel: ' 预计开始时间',
49 name: 'startTime',
50 width:200
51 //allowBlank:false
52 }),
53 new Ext.form.DateField({
54 fieldLabel: ' 实际开始时间',
55 name: 'RealStartTime',
56 width:200
57 //allowBlank:false
58 }),
59 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 }, {
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 new Ext.form.DateField({
103 fieldLabel: ' 预计结束时间',
104 name: 'endTime',
105 width:200
106 //allowBlank:false
107 }),
108 new Ext.form.DateField({
109 fieldLabel: ' 实际结束时间',
110 name: 'RealEndTime',
111 width:200
112 //allowBlank:false
113 })
114