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