前言
　　ExtJS接触至今已有4个月(5.1 - 9.1)，小有心得，由于公司短期内并没有打算采用，所以备忘之以备他日之需。虽然网上资料不少，但学起来仍感费劲，所以还是想以自己的方式来与众分享。


系列
　　1.　　ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ]


版本
　　Ext 3.0.0


正文
　　一、效果图
　　　　先用美图勾引那些驻足观望之人：
 

 

　二、代码讲解
　　　　如果项目中大量采用ExtJS做前端，我建议采用PageBase方式来引用和使用它。
　　　　2.1　　目录结构
 

 

项目中使用Ext并不需要把整个Ext拷贝到项目中，只需要把resources整个目录和如下几个人间拷贝到项目中即可：
　　　　　　　　ext-3.0.0\adapter\ext\ext-base.js
　　　　　　　　ext-3.0.0\ext-all.js
　　　　　　　　ext-3.0.0\src\locale\ext-lang-zh_CN.js

　　　　2.1　　PageBase.cs
 

using  System;
 using  System.Collections.Generic;
 using  System.Text;
 using  System.Web.UI.HtmlControls;
 using  System.Reflection;
 using  ExtJS.Ext;

 ///   <summary>
///  主要用于全局控制
 ///   </summary>
public   class  PageBase : System.Web.UI.Page
{
     #region  Member Variable

     ///   <summary>
     ///  路由搜索方法:search
     ///   </summary>
     public   const   string  ROUTE_METHOD_SEARCH  =   " search " ;
     ///   <summary>
     ///  路由修改方法:modify
     ///   </summary>
     public   const   string  ROUTE_METHOD_MODIFY  =   " modify " ;
     ///   <summary>
     ///  路由删除方法:remove
     ///   </summary>
     public   const   string  ROUTE_METHOD_REMOVE  =   " remove " ;
     ///   <summary>
     ///  路由添加方法:add
     ///   </summary>
     public   const   string  ROUTE_METHOD_ADD  =   " add " ;
     ///   <summary>
     ///  路由详情方法:detail
     ///   </summary>
     public   const   string  ROUTE_METHOD_DETAIL  =   " detail " ;

     #endregion

     #region  Method

     #region  override method

     ///   <summary>
     ///  预初始化，在初始化页面OnInit事件前触发
     ///   </summary>
     ///   <param name="e"></param>
     protected   override   void  OnPreInit(EventArgs e)
    {
         #region  权限认证


         #endregion

         #region  路由请求

         // 路由请求
         string  reqMethod  =  Request.QueryString[ " method " ];

         if  ( ! string .IsNullOrEmpty(reqMethod))
        {
             switch  (reqMethod.ToLower())
            {
                 case  ROUTE_METHOD_MODIFY:
                    Response.Write(Modify());
                     break ;
                 case  ROUTE_METHOD_SEARCH:
                    Response.Write(Search());
                     break ;
                 case  ROUTE_METHOD_REMOVE:
                    Response.Write(Remove());
                     break ;
                 case  ROUTE_METHOD_ADD:
                    Response.Write(Add());
                     break ;
                 case  ROUTE_METHOD_DETAIL:
                    Response.Write(Detail());
                     break ;
                 default :
                     // 反射
                    MethodInfo method  =   this .GetType().GetMethod(reqMethod);
                     if  (method  !=   null )
                    {
                        Response.Write(method.Invoke( this ,  null ));
                    }
                     break ;
            }
            End();
        }

         #endregion

         base .OnPreInit(e);
    }

     ///   <summary>
     ///  初始化(OnInit)
     ///   </summary>
     ///   <param name="e"></param>
     protected   override   void  OnInit(EventArgs e)
    {
         #region  ExtJS

        ExtHelper.Add( this .Header,  this );

         #endregion

         base .OnInit(e);
    }

     #endregion

     #region  virtual method

     ///   <summary>
     ///  搜索
     ///   </summary>
     ///   <returns></returns>
     public   virtual   string  Search()
    {
         return   string .Empty;
    }
     ///   <summary>
     ///  修改
     ///   </summary>
     ///   <returns></returns>
     public   virtual   string  Modify()
    {
         return   string .Empty;
    }
     ///   <summary>
     ///  删除
     ///   </summary>
     ///   <returns></returns>
     public   virtual   string  Remove()
    {
         return   string .Empty;
    }
     ///   <summary>
     ///  添加
     ///   </summary>
     ///   <returns></returns>
     public   virtual   string  Add()
    {
         return   string .Empty;
    }
     ///   <summary>
     ///  详情
     ///   </summary>
     ///   <returns></returns>
     public   virtual   string  Detail()
    {
         return   string .Empty;
    }

     ///   <summary>
     ///  可以覆盖做其他处理
     ///  Response.End();
     ///   </summary>
     public   virtual   void  End()
    {
        Response.End();
    }

     #endregion

     #endregion
}

　　　　　　这个PageBase类主要做以下三个工作：
　　　　　　　　a).　　权限判断
　　　　　　　　　　这里权限判断是空的，大家实际项目中可以加上或者与现在项目进行集成。
　　　　　　　　b).　　ExtJS必须的资源文件加载
　　　　　　　　　　在OnInit页面的HtmlHead中按顺序加载ext-all.css、ext-base.js、ext-all.js、ext-lang-zh_CN.js
　　　　　　　　c).　　路由请求
　　　　　　　　　　处理Ext的GET/POST请求，模拟服务器端控件的事件。
　　　　　　小技巧：
                       Request.QueryString["method"]中method参数名称是忽略大小写的。

　　　　2.2　　ExtHelper.cs
 

using  System;
 using  System.Collections.Generic;
 using  System.Text;
 using  System.Configuration;
 using  System.Web.UI.HtmlControls;

 namespace  ExtJS.Ext
{
     public   sealed   class  ExtHelper
    {
         #region  MemberVariable

         public   static   readonly   string  EXT_BASE  =  ConfigurationManager.AppSettings[ " EXT_BASE " ]  ??   " /js/ext " ;
         ///   <summary>
         ///  ext-all.css
         ///   </summary>
         public   static   readonly   string  EXT_CSS_ALL  =  EXT_BASE  +   " /resources/css/ext-all.css " ;
         ///   <summary>
         ///  ext-all.js
         ///   </summary>
         public   static   readonly   string  EXT_JS_ALL  =  EXT_BASE  +   " /ext-all.js " ;
         ///   <summary>
         ///  ext-base.js
         ///   </summary>
         public   static   readonly   string  EXT_JS_BASE  =  EXT_BASE  +   " /adapter/ext/ext-base.js " ;
         ///   <summary>
         ///  ext-lang-zh_CN.js
         ///   </summary>
         public   static   readonly   string  EXT_JS_LANGUAGE  =  EXT_BASE  +   " /source/locale/ext-lang-zh_CN.js " ;
         ///   <summary>
         ///  EasyExt.js
         ///   </summary>
         public   static   readonly   string  EXT_JS_EASYEXT  =  EXT_BASE  +   " /plugins/EasyExt.js " ;

         ///   <summary>
         ///   0    ext-all.css
         ///   1    ext-base.js
         ///   2    ext-all.js
         ///   3    ext-lang-zh_CN.js
         ///   4    EasyExt.js
         ///   </summary>
         private   static   readonly  IList < HtmlGenericControl >  extresource;

         #endregion

         #region  Constructors

         static  ExtHelper()
        {
            extresource  =   new  List < HtmlGenericControl > ();