前言
extjs接觸至今已有4個月(5.1 - 9.1)，小有心得，由于公司短期内并沒有打算采用，是以備忘之以備他日之需。雖然網上資料不少，但學起來仍感費勁，是以還是想以自己的方式來與衆分享。
系列
版本
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";
/// 路由修改方法:modify
public const string route_method_modify = "modify";
/// 路由删除方法:remove
public const string route_method_remove = "remove";
/// 路由添加方法:add
public const string route_method_add = "add";
/// 路由詳情方法:detail
public const string route_method_detail = "detail";
#endregion
#region method
#region override method
/// 預初始化，在初始化頁面oninit事件前觸發
/// <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());
case route_method_remove:
response.write(remove());
case route_method_add:
response.write(add());
case route_method_detail:
response.write(detail());
default:
//反射
methodinfo method = this.gettype().getmethod(reqmethod);
if (method != null)
{
response.write(method.invoke(this, null));
}
}
end();
}
base.onpreinit(e);
}
/// 初始化(oninit)
protected override void oninit(eventargs e)
#region extjs
exthelper.add(this.header, this);
base.oninit(e);
#region virtual method
/// 搜尋
/// <returns></returns>
public virtual string search()
return string.empty;
/// 修改
public virtual string modify()
/// 删除
public virtual string remove()
/// 添加
public virtual string add()
/// 詳情
public virtual string detail()
/// 可以覆寫做其他處理
/// response.end();
public virtual void end()
response.end();
}
這個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.configuration;
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";
/// ext-all.js
public static readonly string ext_js_all = ext_base + "/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_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
private static readonly ilist<htmlgenericcontrol> extresource;
#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);
#region method
/// 添加ext資源檔案
/// <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]);
}
根據配置檔案指定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';
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,'女'] ]
})
}, {
fieldlabel: '月曆控件',
xtype: 'datefield',
name: 'datecontrol',
format: "y-m-d",
editable : false
//, 預設目前日期
//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
{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:i a"
//"g:ia|g: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 : true
//,enablesourceedit : true
//,enablelinks : true
//,enablefont : true
}],
buttons: [{
text: "保 存"
,handler:function(){
msginfo('儲存');
text: "取 消"
form1.form.reset();
}]
});
function msginfo(str_msg)
ext.messagebox.show({
title: '提示',
msg: str_msg,
width: 400,
icon:ext.messagebox.info,
buttons: ext.messagebox.ok
});
});
</script>
</form>
</body>
</html>
注意這裡并沒有引入ext相關的js、css檔案，這個都在pagebase中處理加載了，這樣隻要需要用ext的頁面繼承pagebase即可，也友善大家将來更新ext，隻需要改下配置檔案即可。
三、對extjs的一點看法
就是上面那段代碼得以讓效果圖中的那副美圖與大家見面，雖然對于美工來講并非難事，可對于非美工的我是極盡享受的，且相容我目前電腦中三種浏覽器ie6、firefox3.5.2、谷歌浏覽器2.0。
關于extjs慢這個問題。首先從适用性方面，如果你對于性能要求很高，基本上可以放棄，這本身就是富客戶的應用，适合一些内部的管理系統、背景，對沒有美工的小公司有很大的幫助；性能方面，大家可以google下關鍵字：“extjs 性能優化”，有相關的檔案來建議你改進它的性能，從ext資源檔案加載方面，可以使用用戶端緩存技術，比如你可以把這個檔案放到登入的頁面裡面，然後用戶端緩存起來，具體可以參照js用戶端緩存；還需要特别注意的是需要你在代碼中指定ext.blank_image_url，因為他預設會去extjs的官方網站下載下傳s.gif圖檔，這裡我把已經它加在了ext-lang-zh_cn.js檔案裡。
四、下載下傳
結束語
如果心動了，你也來試試吧 : )下篇文章将完成一個完整的表單送出，包括驗證和一些對extjs的封裝。
本博相關或您可能感興趣的文章