ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ](1)

前言
　　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>();