韦小宝是我的老乡

——慎思、专注,成就卓越管理
posts - 5, comments - 270, trackbacks - 1, articles - 0
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
    最近园子里有很多朋友关心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
      (2)利用LINQ读取数据记录,关于LINQ方面的文章参考Scott GuthrieLINQ to SQL系列文章
         为了方便ExtJS AJAX方式的调用,这里建一个ASPX页面,起名为:ProjectBaseInfo.aspx,代码如下:
ProjectBaseInfo.aspx.cs

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

(注:请注意JS引用的路径)
   (1)新建GridForProjectLists.js文件(这个才是核心
代码如下:
GridForProjectLists.js

展示成果:

    至此,本文已实现Grid的数据显示、分页、排序的功能。常见的CRUD四个功能的R已完成,接下来,我将提供CUD的功能(如form提交等动作),未完待续……