ExtJS与.NET结合开发实例

最近园子里有很多朋友关心ExtJS，我最近写了一个项目管理工具用到ExtJS,我结合.NET写了个关于Grid实现的一个实例供需要的朋友参考。

　　本实例开发环境是：Windows XP + Sql Server 2005 + IIS6+VS 2008 Beta2(.NET Framework3.5)

实现步骤：
　　1.取数据源
这里是从数据库里读取数据生产JSON的方式供ExtJS Grid调用.

　　(1)用Scott Guthrie提供的生产JSON格式的类,这篇文章可以访问:http://weblogs.asp.net/scottgu/archive/2007/10/01/tip，它的译文请访问:http://blog.joycode.com/scottgu/archive/2007/10/10/109268.aspx

　　建一个类文件JSONHelper.cs,代码如下：
JSONHelper.cs
1using System;
2using System.Collections.Generic;
3using System.Text;
4using System.Web.Script.Serialization;
5namespace Web.Components
6{
7 public static class JSONHelper
8 {
9 public static string ToJSON(this object obj)
10 　　{
11 　JavaScriptSerializer serializer = new JavaScriptSerializer();
12 return serializer.Serialize(obj);
13 }
14
15 　public static string ToJSON(this object obj, int recursionDepth)
16 　{
17 　JavaScriptSerializer serializer = new JavaScriptSerializer();
18 serializer.RecursionLimit = recursionDepth;
19 return serializer.Serialize(obj);
20 }
21 }
22}
23
(2)利用LINQ读取数据记录，关于LINQ方面的文章参考Scott Guthrie的LINQ to SQL系列文章

为了方便ExtJS AJAX方式的调用，这里建一个ASPX页面，起名为：ProjectBaseInfo.aspx，代码如下：
ProjectBaseInfo.aspx.cs
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; //dbml文件的引用
14using System.Data.OracleClient;
15using Database;
16using Web.Components;
17namespace Web.Projects.JsonDataSource
18{
19 public partial class ProjectBaseInfo : System.Web.UI.Page
20 {
21 protected string strJsonSource=string.Empty;
22 protected void Page_Load(object sender, EventArgs e)
23 {
24 int start=int.Parse(Request.Form["start"]+""); //分页需要limit,start是mysql里用的（或取当页开始的记录标识编号）
25 　 int limit = int.Parse(Request.Form["limit"] + ""); //或取每页记录数
26 　string sort = Request.Form["sort"] + ""; //或取排序方向
27 　string dir = Request.Form["dir"] + ""; //或取所要排序的字段名
28 GetJsonSouceString(start,limit,sort,dir);
29 }
30
31 　private void GetJsonSouceString(int start,int limit,string sort,string dir)
32 　{
33 　ProjectBaseInfoDataContext db = new ProjectBaseInfoDataContext();
34 　var query = from p in db.PROJECT_BASE_INFOs
35 　select new { p.PROJECT_NO, p.PROJECT_NAME, p.PROJECT_DEPT_NO, p.PROJECT_MANAGER, p.PROJECT_CURRENT_STATUS, PROJECT_START_DATE = p.PROJECT_START_DATE + "", PROJECT_FINISH_DATE = p.PROJECT_FINISH_DATE + "", PROJECT_REAL_START_DATE = p.PROJECT_REAL_START_DATE + "", PROJECT_REAL_FINISH_DATE = p.PROJECT_REAL_FINISH_DATE + "", p.PROJECT_ALIAS, p.PROJECT_TYPE, p.PROJECT_LEADER, p.PROJECT_MEMO

}; //类似PROJECT_REAL_FINISH_DATE=p.PROJECT_REAL_FINISH_DATE+"的处理了Grid中日期格式显示的问题

36 　排序字段和排序方向#region 排序字段和排序方向
37 　if (sort != "" && dir != "")
38 　{
39 　switch (sort)
40 　{
41 　　case "PROJECT_NO":
42 　 if (dir == "ASC")
43 　 {
44 　query = query.OrderBy(p =＞p.PROJECT_NO);
45 }
46 else
47 {
48 query = query.OrderByDescending(p =＞ p.PROJECT_NO);
49 }
50 break;
51 case "PROJECT_NAME":
52 if (dir == "ASC")
53 {
54 query = query.OrderBy(p ＝＞p.PROJECT_NAME);
55 }
56 else
57 {
58 query = query.OrderByDescending(p =＞p.PROJECT_NAME);
59 }
60 break;
61 case "PROJECT_DEPT_NO":
62 if (dir == "ASC")
63 {
64 query = query.OrderBy(p =＞ p.PROJECT_DEPT_NO);
65 }
66 else
67 {
68 query = query.OrderByDescending(p =＞ p.PROJECT_DEPT_NO);
69 }
70 break;
71 case "PROJECT_MANAGER":
72 if (dir == "ASC")
73 {
74 query = query.OrderBy(p =＞ p.PROJECT_MANAGER);
75 }
76 else
77 {
78 query = query.OrderByDescending(p =＞ p.PROJECT_MANAGER);
79 }
80 break;
81 case "PROJECT_CURRENT_STATUS":
82 if (dir == "ASC")
83 {
84 query = query.OrderBy(p =＞p.PROJECT_CURRENT_STATUS);
85 }
86 else
87 {
8　 query = query.OrderByDescending(p =＞ p.PROJECT_CURRENT_STATUS);
89 }
90 break;
91 case "PROJECT_START_DATE":
92 if (dir == "ASC")
93 {
94 query = query.OrderBy(p =＞ p.PROJECT_START_DATE);
95 }
96 else
97 {
98 query = query.OrderByDescending(p => p.PROJECT_START_DATE);
99 }
100 break;
101 case "PROJECT_FINISH_DATE":
102 if (dir == "ASC")
103 {
104 query = query.OrderBy(p =＞ p.PROJECT_FINISH_DATE);
105 }
106 else
107 {
108 query = query.OrderByDescending(p =＞p.PROJECT_FINISH_DATE);
109 }
1００ break;
111 case "PROJECT_REAL_START_DATE":
112 if (dir == "ASC")
113 {
114 query = query.OrderBy(p =＞ p.PROJECT_REAL_START_DATE);
115 }
116 else
1 {
118 query = query.OrderByDescending(p =＞p.PROJECT_REAL_START_DATE);
119 }
120 break;
121 case "PROJECT_REAL_FINISH_DATE":
122 if (dir == "ASC")
123 {
124 query = query.OrderBy(p =＞p.PROJECT_REAL_FINISH_DATE);
125 }
126 else
127 {
128 query = query.OrderByDescending(p =＞p.PROJECT_REAL_FINISH_DATE);
129 }
130 break;
131 default:
132 break;
133 }
134 }
135 #endregion
136
137 int iCount = query.Count(); //所要记录数
138 int PageNum = start / limit; //共有页数
139 int PageSize = limit;
140 query = query.Skip(PageSize * PageNum).Take(PageSize); //当前页记录
141 string JsonSource= query.ToJSON(); //当前页记录转成JSON格式
142 strJsonSource = @"{""totalCount"":"""+iCount+"";
143 strJsonSource = strJsonSource + @""",""data"":" + JsonSource + "}"; //Grid的分页区显示所有记录数增加totalCount信息
144 }
145 }
146}
147
ProjectBaseInfo.aspx中的代码为：
＜%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProjectBaseInfo.aspx.cs" Inherits="Web.Projects.JsonDataSource.ProjectBaseInfo" %＞
＜%=strJsonSource %＞ 至此，已完成了取数据源。
2.页面客户端
(1)下载ExtJS库，请访问：http://extjs.com/。
(2)在你的WEB工程中建一个ExtJS目录。把下载的包里的目录都COPY进来（为了简便起见）。
(3)建一个ProjectLists.html页面，代码如下：
ProjectLists.html
1＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
2〈html xmlns="http://www.w3.org/1999/xhtml"〉
3〈head runat="server"〉
4 〈title〉项目一览表〈/title〉
5 〈meta http-equiv="Content-Type" content="text/html; charset=gb2312"〉
6 〈link rel="stylesheet" type="text/css" href="../Resources/css/ext-all.css" /〉
7 〈!-- GC --〉
8 〈!-- LIBS --〉
9 〈script type="text/javascript" src="../Adapter/ext/ext-base.js"〉〈/script〉
10 〈!-- ENDLIBS --〉
11 〈script type="text/javascript" src="../Script/ext-all.js"〉〈/script〉
12
13 〈script type="text/javascript" src="../Script/GridForProjectLists.js"〉〈/script〉
14
15 〈link rel="stylesheet" type="text/css" href="../CSS/Grid.css" /〉
16 〈link rel="stylesheet" type="text/css" href="../CSS/Forms.css" /〉
17 〈link rel="stylesheet" type="text/css" href="../CSS/Combos.css" /〉
18 〈!-- Common Styles for the Projects --〉
19 〈style type="text/css"〉
20 body .x-panel
21 {}{
22 margin-bottom: 20px;
23 }
24 .icon-grid
25 {}{
26 background-image: url(../Images/icons/grid.png) !important;
27 }
28 #button-grid .x-panel-body
29 {}{
30 border: 1px solid #99bbe8;
31 border-top: 0 none;
32 }
33 .add
34 {}{
35 background-image: url(../Images/icons/add.gif) !important;
36 }
37 .search
38 {}{
39 background-image: url(../Images/icons/plugin.gif) !important;
40 }
41 .remove
42 {}{
43 background-image: url(../Images/icons/delete.gif) !important;
44 }
45 .save
46 {}{
47 background-image: url(../Images/icons/save.gif) !important;
48 }
49 .ext-mb-save
50 {}{
51 background: transparent url(../Images/download.gif) no-repeat top left;
52 height: 46px;
53 }
54 〈/style〉
55〈/head〉
56
57〈body〉
58〈/body〉
59〈/html〉
（注：请注意JS引用的路径）
(1)新建GridForProjectLists.js文件（这个才是核心）
代码如下：
GridForProjectLists.js
1/**//*
2 * Ext JS Library 2.0 Beta 1
3 * Copyright(c) 2006-2007, Ext JS, LLC.
4 * licensing@extjs.com
5 *
6 * http://extjs.com/license
7 */
8Ext.onReady(function(){
9 var win;
10 var newwin;
11 Ext.QuickTips.init();
12 // create the Data Store
13 var ds = new Ext.data.GroupingStore({
14 // load using script tags for cross domain, if the data in on the same domain as
15 // this page, an HttpProxy would be better
16 proxy: new Ext.data.HttpProxy({
17 url: '../Projects/JsonDataSource/ProjectBaseInfo.aspx'
18 }),
19
20 // create reader that reads the project records
21 reader: new Ext.data.JsonReader({
22 root: 'data',
23 totalProperty: 'totalCount'
24 }, [
25 {name:'PROJECT_NO', type:'string'},
26 {name:'PROJECT_NAME', type:'string'},
27 {name:'PROJECT_ALIAS', type:'string'},
28 {name:'PROJECT_DEPT_NO', type:'string'},
29 {name:'PROJECT_MANAGER', type:'string'},
30 {name:'PROJECT_LEADER', type:'string'},
31 {name:'PROJECT_CURRENT_STATUS', type:'string'},
32 {name:'PROJECT_START_DATE', type:'date'},
33 {name:'PROJECT_FINISH_DATE', type:'date'},
34 {name:'PROJECT_REAL_START_DATE', type:'date'},
35 {name:'PROJECT_REAL_FINISH_DATE',type:'date'},
36 {name:'PROJECT_MEMO', type:'string'}
37 ]),
38 //groupField:'PROJECT_DEPT_NO',
39 remoteSort: true
40 });
41 ds.setDefaultSort('PROJECT_NAME', 'desc');
42
43 // pluggable renders
44 function renderProject(value, p, record){
45
46 return String.format(
47 '〈img border=0 src="../Images/icons/application_view_list.png" id="btnView_{0}" style="cursor:hand" alt="浏览"〉    

〈a href="ProjectDetail.aspx?ProjectNo={0}" target="_blank"〉〈img border=0 src="../Images/icons/application_view_list.png" style="cursor:hand" alt="编辑"〉〈/a〉     〈a href="ProjectDetail.aspx?ProjectNo={0}" target="_blank"〉〈img border=0 src="../Images/icons/cross.gif" style="cursor:hand" alt="删除"〉〈/a〉',
48 record.data.PROJECT_NO);
49 }
50
51 // the column model has information about grid columns
52 // dataIndex maps the column to the specific data field in
53 // the data store
54 var nm = new Ext.grid.RowNumberer();
55 var sm = new Ext.grid.CheckboxSelectionModel(); // add checkbox column
56 var cm = new Ext.grid.ColumnModel([nm,sm,
57 {id:'PROJECT_NO',header:"项目编号",dataIndex: 'PROJECT_NO', width: 40, align:'center'},
58 {header:"项目名称",dataIndex: 'PROJECT_NAME', width: 100,align:'left' },//,renderer: renderProject},
59 {header:"项目简称",dataIndex: 'PROJECT_ALIAS', width: 50, align:'left'},
60 {header:"部门",dataIndex: 'PROJECT_DEPT_NO', width: 50, align:'center'},
61 {header:"项目经理", dataIndex: 'PROJECT_MANAGER', width: 40, align:'center'},
62 {header:"开发经理", dataIndex: 'PROJECT_LEADER', width: 40, align:'center'},

63 {header:"当前状态",dataIndex: 'PROJECT_CURRENT_STATUS',width: 40, align:'center'},
64 {header:"预计开始日期",renderer: Ext.util.Format.dateRenderer('Y-m-d'),dataIndex: 'PROJECT_START_DATE',width: 50, align:'center'},
65 {header:"预计结束日期",renderer: Ext.util.Format.dateRenderer('Y-m-d'),dataIndex: 'PROJECT_FINISH_DATE',width: 50, align:'center'},
66
{header:"实际开始日期",renderer: Ext.util.Format.dateRenderer('Y-m-d'),dataIndex: 'PROJECT_REAL_START_DATE',width: 50, align:'center'},
67 {header:"实际结束日期",renderer: Ext.util.Format.dateRenderer('Y-m-d'),dataIndex: 'PROJECT_REAL_FINISH_DATE',width: 50, align:'center'},
68 {header:"备注",dataIndex: 'PROJECT_MEMO',width: 50, align:'left'},
69 {id:'PROJECT_NO',header:"操作",dataIndex: 'PROJECT_NO', width: 60, align:'center',renderer:renderProject,sortable: false}
70 ]);
71
72 //hide column
73 cm.setHidden(4, !cm.isHidden(4)); //隐藏项目简称列
74 cm.setHidden(7, !cm.isHidden(7)); //隐藏开发经理列
75 cm.setHidden(13, !cm.isHidden(13)); //隐藏备注列
76 // by default columns are sortable
77 cm.defaultSortable = true;
78 var gdProjects = new Ext.grid.GridPanel({
79 frame:true,
80 collapsible: true,
81 animCollapse: false,
82 //el:'projects-grid',
83 width :965,
84 height:530,
85 title:'项目一览表',
86 iconCls: 'icon-grid',
87 renderTo: document.body,
88 store: ds,
89 cm: cm,
90 sm: sm,
91 trackMouseOver:true,
92 loadMask: {msg:'正在加载数据，请稍侯……'},
93 //loadMask: true,
94 viewConfig: {
95 forceFit:true,
96 enableRowBody:true,
97 getRowClass : function(record, rowIndex, p, ds){
98 return 'x-grid3-row-collapsed';
99 }
100 },
101 view: new Ext.grid.GroupingView({
102 forceFit:true,
103 groupTextTpl: '{text} ({[values.rs.length]}条记录)'
104 }),
105 bbar: new Ext.PagingToolbar({
106 pageSize: 25,
107 store: ds,
108 displayInfo: true,
109 displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',
110 emptyMsg: "无显示数据"
111 }),
112 // inline toolbars
113 tbar:[{
114 id:'btnAdd',
115 text:'新增',
116 tooltip:'新增',
117 iconCls:'add',
118 handler: showAddPanel
119 }, '-', {
120 text:'查询',
121 tooltip:'查询',
122 iconCls:'search'
123 }, '-', {
124 text:'批量删除',
125 tooltip:'删除',
126 iconCls:'remove',
127 handler:showDelDialog
128 }]
129
130 });
131
132});
展示成果：

至此，本文已实现Grid的数据显示、分页、排序的功能。常见的CRUD四个功能的R已完成.