正文
一、效果图
先用美图勾引那些驻足观望之人:
二、代码讲解
如果项目中大量采用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
}
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 > ();
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,如需转载请自行联系原作者