Ext常用案例.docx
《Ext常用案例.docx》由会员分享，可在线阅读，更多相关《Ext常用案例.docx（17页珍藏版）》请在冰豆网上搜索。
Ext常用案例
ExtJs备忘录
（1）——Form表单
（一）[控件使用]
前言
ExtJS接触至今已有4个月（5.1-9.1），小有心得，由于公司短期内并没有打算采用，所以备忘之以备他日之需。
虽然网上资料不少，但学起来仍感费劲，所以还是想以自己的方式来与众分
系列
1. ExtJs备忘录
（1）——Form表单
（一）[控件使用]
版本
Ext3.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
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Text;
usingSystem.Web.UI.HtmlControls;
usingSystem.Reflection;
usingExtJS.Ext;
///
///主要用于全局控制
///
publicclassPageBase:
System.Web.UI.Page
{
#regionMemberVariable
///
///路由搜索方法:
search
///
publicconststringROUTE_METHOD_SEARCH="search";
///
///路由修改方法:
modify
///
publicconststringROUTE_METHOD_MODIFY="modify";
///
///路由删除方法:
remove
///
publicconststringROUTE_METHOD_REMOVE="remove";
///
///路由添加方法:
add
///
publicconststringROUTE_METHOD_ADD="add";
///
///路由详情方法:
detail
///
publicconststringROUTE_METHOD_DETAIL="detail";
#endregion
#regionMethod
#regionoverridemethod
///
///预初始化，在初始化页面OnInit事件前触发
///
///
protectedoverridevoidOnPreInit（EventArgse）
{
#region权限认证
#endregion
#region路由请求
//路由请求
stringreqMethod=Request.QueryString["method"];
if（!
string.IsNullOrEmpty（reqMethod））
{
switch（reqMethod.ToLower（））
{
caseROUTE_METHOD_MODIFY:
Response.Write（Modify（））;
break;
caseROUTE_METHOD_SEARCH:
Response.Write（Search（））;
break;
caseROUTE_METHOD_REMOVE:
Response.Write（Remove（））;
break;
caseROUTE_METHOD_ADD:
Response.Write（Add（））;
break;
caseROUTE_METHOD_DETAIL:
Response.Write（Detail（））;
break;
default:
//反射
MethodInfomethod=this.GetType（）.GetMethod（reqMethod）;
if（method!
=null）
{
Response.Write（method.Invoke（this,null））;
}
break;
}
End（）;
}
#endregion
base.OnPreInit（e）;
}
///
///初始化（OnInit）
///
///
protectedoverridevoidOnInit（EventArgse）
{
#regionExtJS
ExtHelper.Add（this.Header,this）;
#endregion
base.OnInit（e）;
}
#endregion
#regionvirtualmethod
///
///搜索
///
///
publicvirtualstringSearch（）
{
returnstring.Empty;
}
///
///修改
///
///
publicvirtualstringModify（）
{
returnstring.Empty;
}
///
///删除
///
///
publicvirtualstringRemove（）
{
returnstring.Empty;
}
///
///添加
///
///
publicvirtualstringAdd（）
{
returnstring.Empty;
}
///
///详情
///
///
publicvirtualstringDetail（）
{
returnstring.Empty;
}
///
///可以覆盖做其他处理
///Response.End（）;
///
publicvirtualvoidEnd（）
{
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
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Text;
usingSystem.Configuration;
usingSystem.Web.UI.HtmlControls;
namespaceExtJS.Ext
{
publicsealedclassExtHelper
{
#regionMemberVariable
publicstaticreadonlystringEXT_BASE=ConfigurationManager.AppSettings["EXT_BASE"]?
?
"/js/ext";
///
///ext-all.css
///
publicstaticreadonlystringEXT_CSS_ALL=EXT_BASE+"/resources/css/ext-all.css";
///
///ext-all.js
///
publicstaticreadonlystringEXT_JS_ALL=EXT_BASE+"/ext-all.js";
///
///ext-base.js
///
publicstaticreadonlystringEXT_JS_BASE=EXT_BASE+"/adapter/ext/ext-base.js";
///
///ext-lang-zh_CN.js
///
publicstaticreadonlystringEXT_JS_LANGUAGE=EXT_BASE+"/source/locale/ext-lang-zh_CN.js";
///
///EasyExt.js
///
publicstaticreadonlystringEXT_JS_EASYEXT=EXT_BASE+"/plugins/EasyExt.js";
///
///0ext-all.css
///1ext-base.js
///2ext-all.js
///3ext-lang-zh_CN.js
///4EasyExt.js
///
privatestaticreadonlyIListextresource;
#endregion
#regionConstructors
staticExtHelper（）
{
extresource=newList（）;
//ext-all.css
HtmlGenericControlcss_ext_all=newHtmlGenericControl（"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
HtmlGenericControljs_ext_base=newHtmlGenericControl（"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
HtmlGenericControljs_ext_all=newHtmlGenericControl（"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
HtmlGenericControljs_ext_lang=newHtmlGenericControl（"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
HtmlGenericControljs_ext_easyext=newHtmlGenericControl（"script"）;
js_ext_easyext.Attributes.Add（"type","text/javascript"）;
js_ext_easyext.Attributes.Add（"src",EXT_JS_EASYEXT）;
extresource.Add（js_ext_easyext）;
}
#endregion
#regionMethod
///
///添加Ext资源文件
///
///
///
publicstaticvoidAdd（HtmlHeadhead,System.Web.UI.Pagepage）
{
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内代码为空，所以仅贴页面代码：
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="add.aspx.cs"Inherits="add"%>
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
表单控件
Ext.onReady（function（）{
Ext.QuickTips.init（）;
Ext.form.Field.prototype.msgTarget='side';
varform1=newExt.FormPanel（{
layout:
'form',
collapsible:
true,
autoHeight:
true,
frame:
true,
renderTo:
Ext.getBody（）,
title:
'hand"onclick="window.location.reload（）;">表单控件',
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:
newExt.data.SimpleStore（{
fields:
['Id','Name'],
data:
[[1,'男'],[0,'女']]
}）
},{
fieldLabel:
'日历控件',
xtype:
'datefield',
name:
'DateControl',
format:
"Y-m-d",
editable:
false
//,默认当前日期
//value:
newDate（）.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:
'CheckboxItems',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:
iA"
//"g:
ia|g:
iA|g:
ia|g:
iA|h:
i|g:
i|H:
i|ga|ha|gA|ha|ga|gA|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
升级会员 