ExtJs備忘錄（1）——Form表單（一）[控制元件使用](1)

正文

一、效果圖

先用美圖勾引那些駐足觀望之人：

　二、程式碼講解

如果專案中大量採用ExtJS做前端，我建議採用PageBase方式來引用和使用它。

2.1　　目錄結構

專案中使用Ext並不需要把整個Ext拷貝到專案中，只需要把resources整個目錄和如下幾個人間拷貝到專案中即可：

ext-3.0.0adapterextext-base.js

ext-3.0.0ext-all.js

ext-3.0.0srclocaleext-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>();

本文轉自over140 51CTO部落格，原文連結：http://blog.51cto.com/over140/586549，如需轉載請自行聯絡原作者

ExtJs備忘錄（1）——Form表單（一）[控制元件使用](1)

相關文章