//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]);
}
}
}
}
根據配置檔案指定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檔案裡。
本文轉自over140 51CTO部落格，原文連結：http://blog.51cto.com/over140/586550，如需轉載請自行聯系原作者
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)