前言
ExtJS接触至今已有4个月(5.1 - 9.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
/// 路由搜索方法: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";
/// 预初始化，在初始化页面OnInit事件前触发
/// </summary>
/// <param name="e"></param>
protected override void OnPreInit(EventArgs e)
{
#region 权限认证
string reqMethod = Request.QueryString["method"];
{
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();
}
}
/// 初始化(OnInit)
/// </summary>
/// <param name="e"></param>
protected override void OnInit(EventArgs e)
{
#region ExtJS
}
/// 搜索
/// </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;
}
/// 可以覆盖做其他处理
/// Response.End();
/// </summary>
public virtual void End()
{
Response.End();
}
}
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
/// <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";
/// 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;
{
extresource = new List<HtmlGenericControl>();
HtmlGenericControl css_ext_all = new HtmlGenericControl("link");
css_ext_all.Attributes.Add("type", "text/css");
css_ext_all.Attributes.Add("rel", "stylesheet");
css_ext_all.Attributes.Add("href", EXT_CSS_ALL);
extresource.Add(css_ext_all);
HtmlGenericControl js_ext_base = new HtmlGenericControl("script");
js_ext_base.Attributes.Add("type", "text/javascript");
js_ext_base.Attributes.Add("src", EXT_JS_BASE);
extresource.Add(js_ext_base);
HtmlGenericControl js_ext_all = new HtmlGenericControl("script");
js_ext_all.Attributes.Add("type", "text/javascript");
js_ext_all.Attributes.Add("src", EXT_JS_ALL);
extresource.Add(js_ext_all);
HtmlGenericControl js_ext_lang = new HtmlGenericControl("script");
js_ext_lang.Attributes.Add("type", "text/javascript");
js_ext_lang.Attributes.Add("src", EXT_JS_LANGUAGE);
extresource.Add(js_ext_lang);
HtmlGenericControl js_ext_easyext = new HtmlGenericControl("script");
js_ext_easyext.Attributes.Add("type", "text/javascript");
js_ext_easyext.Attributes.Add("src", EXT_JS_EASYEXT);
extresource.Add(js_ext_easyext);
/// 添加Ext资源文件
/// </summary>
/// <param name="head"></param>
/// <param name="page"></param>
public static void Add(HtmlHead head, System.Web.UI.Page page)
{
if (head != null)
{
if (extresource != null)
{
//head.Controls[0]为title
head.Controls.AddAt(1, extresource[0]);
head.Controls.AddAt(2, extresource[1]);
head.Controls.AddAt(3, extresource[2]);
head.Controls.AddAt(4, extresource[3]);
// head.Controls.AddAt(5, extresource[4]);
}
}
}
}
}
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>();
//ext-all.css
HtmlGenericControl css_ext_all = new HtmlGenericControl("link");
css_ext_all.Attributes.Add("type", "text/css");
css_ext_all.Attributes.Add("rel", "stylesheet");
css_ext_all.Attributes.Add("href", EXT_CSS_ALL);
extresource.Add(css_ext_all);
//ext-base.js
HtmlGenericControl js_ext_base = new HtmlGenericControl("script");
js_ext_base.Attributes.Add("type", "text/javascript");
js_ext_base.Attributes.Add("src", EXT_JS_BASE);
extresource.Add(js_ext_base);
//ext-all.js
HtmlGenericControl js_ext_all = new HtmlGenericControl("script");
js_ext_all.Attributes.Add("type", "text/javascript");
js_ext_all.Attributes.Add("src", EXT_JS_ALL);
extresource.Add(js_ext_all);
//ext-lang-zh_CN.js
HtmlGenericControl js_ext_lang = new HtmlGenericControl("script");
js_ext_lang.Attributes.Add("type", "text/javascript");
js_ext_lang.Attributes.Add("src", EXT_JS_LANGUAGE);
extresource.Add(js_ext_lang);
//EasyExt.js
HtmlGenericControl js_ext_easyext = new HtmlGenericControl("script");
js_ext_easyext.Attributes.Add("type", "text/javascript");
js_ext_easyext.Attributes.Add("src", EXT_JS_EASYEXT);
extresource.Add(js_ext_easyext);
}
#endregion
#region Method
/// <summary>
/// 添加Ext资源文件
/// </summary>
/// <param name="head"></param>
/// <param name="page"></param>
public static void Add(HtmlHead head, System.Web.UI.Page page)
{
if (head != null)
{
if (extresource != null)
{
//head.Controls[0]为title
head.Controls.AddAt(1, extresource[0]);
head.Controls.AddAt(2, extresource[1]);
head.Controls.AddAt(3, extresource[2]);
head.Controls.AddAt(4, extresource[3]);
// head.Controls.AddAt(5, extresource[4]);
}
}
}
#endregion
}
}
根据配置文件指定Ext路径来加载ext的css和js文件，将来可方便的升级版本之用，仅需修改配置文件即可完成升级，但是需要注意ext并没有完全100%的向下兼容！
2.3 add.aspx
add页面注意是继承PageBase，由于本文仅使用控件，而cs内代码为空，所以仅贴页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="add.aspx.cs" Inherits="add" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>表单控件</title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
layout: 'form',
collapsible: true,
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
title: '<center style="curor:hand" onclick="window.location.reload();">表单控件</center>',
style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
//设置标签对齐方式
labelAlign: 'right',
//设置标签宽
labelWidth: 170,
//设置按钮的对齐方式
buttonAlign:'center',
//默认元素属性设置
defaults:{
width:180
},
items: [{
fieldLabel: '文本框控件',
name: 'TextBox',
xtype: 'textfield'
//,readOnly : true //只读
//,emptyText :'请输入数据' //为空时显示的文本，注意不是value
},{
fieldLabel: '只允许输入数字'
,name:'TextBoxNumber'
,xtype:'numberfield'
//,allowDecimals: false // 允许小数点
//,allowNegative: false, // 允许负数
//,maxValue:1000 //最大值
//,minValue:0 //最小值
},{
fieldLabel: '下拉框控件',
name: 'DropDownList',
xtype: 'combo',
//本地数据源 local/remote
mode:'local',
//设置为选项的text的字段
displayField: "Name",
//设置为选项的value的字段
valueField: "Id",
//是否可以输入，还是只能选择下拉框中的选项
editable : false,
typeAhead: true,
//必须选择一项
//forceSelection: true,
//输入部分选项内容匹配的时候显示所有的选项
triggerAction: 'all',
//selectOnFocus:true,
//数据
store:new Ext.data.SimpleStore({
fields: ['Id', 'Name'],
data: [ [1,'男'],[0
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>表单控件</title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var form1 = new Ext.FormPanel({
layout: 'form',
collapsible: true,
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
title: '<center style="curor:hand" onclick="window.location.reload();">表单控件</center>',
style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
//设置标签对齐方式
labelAlign: 'right',
//设置标签宽
labelWidth: 170,
//设置按钮的对齐方式
buttonAlign:'center',
//默认元素属性设置
defaults:{
width:180
},
items: [{
fieldLabel: '文本框控件',
name: 'TextBox',
xtype: 'textfield'
//,readOnly : true //只读
//,emptyText :'请输入数据' //为空时显示的文本，注意不是value
},{
fieldLabel: '只允许输入数字'
,name:'TextBoxNumber'
,xtype:'numberfield'
//,allowDecimals: false // 允许小数点
//,allowNegative: false, // 允许负数
//,maxValue:1000 //最大值
//,minValue:0 //最小值
},{
fieldLabel: '下拉框控件',
name: 'DropDownList',
xtype: 'combo',
//本地数据源 local/remote
mode:'local',
//设置为选项的text的字段
displayField: "Name",
//设置为选项的value的字段
valueField: "Id",
//是否可以输入，还是只能选择下拉框中的选项
editable : false,
typeAhead: true,
//必须选择一项
//forceSelection: true,
//输入部分选项内容匹配的时候显示所有的选项
triggerAction: 'all',
//selectOnFocus:true,
//数据
store:new Ext.data.SimpleStore({
fields: ['Id', 'Name'],
data: [ [1,'男'],[0