Ext常用案例.docx

1、Ext常用案例ExtJs 备忘录（1） Form表单（一） 控件使用 前言ExtJS接触至今已有4个月(5.1 - 9.1)，小有心得，由于公司短期内并没有打算采用，所以备忘之以备他日之需。虽然网上资料不少，但学起来仍感费劲，所以还是想以自己的方式来与众分系列1.ExtJs 备忘录（1） Form表单（一） 控件使用 版本Ext 3.0.0正文一、效果图先用美图勾引那些驻足观望之人：二、代码讲解如果项目中大量采用ExtJS做前端，我建议采用PageBase方式来引用和使用它。2.1目录结构项目中使用Ext并不需要把整个Ext拷贝到项目中，只需要把resources整个目录和如下几个人间拷贝到项

2、目中即可：ext-3.0.0adapterextext-base.jsext-3.0.0ext-all.jsext-3.0.0srclocaleext-lang-zh_CN.js2.1PageBase.csusing System;using System.Collections.Generic;using System.Text;using System.Web.UI.HtmlControls;using System.Reflection;using ExtJS.Ext;/ / 主要用于全局控制/ public class PageBase : System.Web.UI.Page #re

3、gion Member Variable / / 路由搜索方法:search / public const string ROUTE_METHOD_SEARCH = search; / / 路由修改方法:modify / public const string ROUTE_METHOD_MODIFY = modify; / / 路由删除方法:remove / public const string ROUTE_METHOD_REMOVE = remove; / / 路由添加方法:add / public const string ROUTE_METHOD_ADD = add; / / 路由详情

4、方法:detail / public const string ROUTE_METHOD_DETAIL = detail; #endregion #region Method #region override method / / 预初始化，在初始化页面OnInit事件前触发 / / protected override void OnPreInit(EventArgs e) #region 权限认证 #endregion #region 路由请求 /路由请求 string reqMethod = Request.QueryStringmethod; if (!string.IsNullOrE

5、mpty(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: Resp

6、onse.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); / / 初始化(OnInit) / / protected override void OnInit(EventArgs e) #region ExtJS ExtHelper.Add(this

7、.Header, this); #endregion base.OnInit(e); #endregion #region virtual method / / 搜索 / / public virtual string Search() return string.Empty; / / 修改 / / public virtual string Modify() return string.Empty; / / 删除 / / public virtual string Remove() return string.Empty; / / 添加 / / public virtual string A

8、dd() return string.Empty; / / 详情 / / public virtual string Detail() return string.Empty; / / 可以覆盖做其他处理 / Response.End(); / public virtual void End() Response.End(); #endregion #endregion这个PageBase类主要做以下三个工作：a).权限判断这里权限判断是空的，大家实际项目中可以加上或者与现在项目进行集成。b).ExtJS必须的资源文件加载在OnInit页面的HtmlHead中按顺序加载ext-all.css、

9、ext-base.js、ext-all.js、ext-lang-zh_CN.jsc).路由请求处理Ext的GET/POST请求，模拟服务器端控件的事件。小技巧： Request.QueryStringmethod中method参数名称是忽略大小写的。2.2ExtHelper.csusing System;using System.Collections.Generic;using System.Text;using System.Configuration;using System.Web.UI.HtmlControls;namespace ExtJS.Ext public sealed cl

10、ass ExtHelper #region MemberVariable public static readonly string EXT_BASE = ConfigurationManager.AppSettingsEXT_BASE ? /js/ext; / / ext-all.css / public static readonly string EXT_CSS_ALL = EXT_BASE + /resources/css/ext-all.css; / / ext-all.js / public static readonly string EXT_JS_ALL = EXT_BASE

11、+ /ext-all.js; / / ext-base.js / public static readonly string EXT_JS_BASE = EXT_BASE + /adapter/ext/ext-base.js; / / ext-lang-zh_CN.js / public static readonly string EXT_JS_LANGUAGE = EXT_BASE + /source/locale/ext-lang-zh_CN.js; / / EasyExt.js / public static readonly string EXT_JS_EASYEXT = EXT_B

12、ASE + /plugins/EasyExt.js; / / 0 ext-all.css / 1 ext-base.js / 2 ext-all.js / 3 ext-lang-zh_CN.js / 4 EasyExt.js / private static readonly IList extresource; #endregion #region Constructors static ExtHelper() extresource = new List(); /ext-all.css HtmlGenericControl css_ext_all = new HtmlGenericCont

13、rol(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/javascr

14、ipt); 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

15、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.Attribute

16、s.Add(type, text/javascript); js_ext_easyext.Attributes.Add(src, EXT_JS_EASYEXT); extresource.Add(js_ext_easyext); #endregion #region Method / / 添加Ext资源文件 / / / public static void Add(HtmlHead head, System.Web.UI.Page page) if (head != null) if (extresource != null) /head.Controls0为title head.Contro

17、ls.AddAt(1, extresource0); head.Controls.AddAt(2, extresource1); head.Controls.AddAt(3, extresource2); head.Controls.AddAt(4, extresource3); / head.Controls.AddAt(5, extresource4); #endregion 根据配置文件指定Ext路径来加载ext的css和js文件，将来可方便的升级版本之用，仅需修改配置文件即可完成升级，但是需要注意ext并没有完全100%的向下兼容！2.3add.aspxadd页面注意是继承PageBa

18、se，由于本文仅使用控件，而cs内代码为空，所以仅贴页面代码： 表单控件 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: 表单控件, style: margin-left:auto;margin-right:auto;

19、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:TextBoxN

20、umber ,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, /是否可以输入，还是只能选择下拉框中的选

21、项 editable : false, typeAhead: true, /必须选择一项 /forceSelection: true, /输入部分选项内容匹配的时候显示所有的选项 triggerAction: all, /selectOnFocus:true, /数据 store:new Ext.data.SimpleStore( fields: Id, Name, data: 1,男,0,女 ) , fieldLabel: 日历控件, xtype: datefield, name: DateControl, format: Y-m-d, editable : false /, 默认当前日期

22、/value:new Date().dateFormat(Y-m-d) , fieldLabel: 单选控件 ,xtype:radiogroup ,name:Radios ,items: name : RadioItems,boxLabel:选我,inputValue:1,checked:true, name : RadioItems,boxLabel:选我吧,inputValue:0 , fieldLabel: 复选控件 ,xtype:checkboxgroup ,name:Checkboxs /columns属性表示用2行来显示数据 ,columns:2 ,items: name : Ch

23、eckboxItems,boxLabel:香蕉,inputValue:A, name : CheckboxItems,boxLabel:苹果,inputValue:B, name : CheckboxItems,boxLabel:橘子,inputValue:C, name : CheckboxItems,boxLabel:桃子,inputValue:D , fieldLabel: 文本域控件 ,xtype:textarea ,value:可以输好多字！ ,height:50 , fieldLabel: 时间控件 ,xtype:timefield /格式化输出 默认为 g:i A /g:ia|g

24、:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H ,format:H:i /时间间隔(分钟) ,increment: 60 , fieldLabel: 标签页 ,xtype:fieldset ,title: 标签页 ,autoHeight:true ,items : xtype: panel, title: 标签页中的面板, frame: true, height: 50 , fieldLabel: 在线编辑器 ,xtype:htmleditor ,width:260 ,height:100 /以下为默认选项，其他请参照源代码 /,enableColors: false /,enableFormat : true /,enableFontSize : true /,enableAlignments : true /,enableLists : t