使用過Ext的朋友都體會過該JavaScript庫的強大,但該庫的學習門檻較高。現在有了一個封裝了Ext庫的Asp.net 伺服器控制項,當前有二個版本,分別支援.NET2.0和.NET3.5,本人試用的是.NET3.5 版本,內包含ScriptManager、ScriptContainer、HtmlEditor、Panel,DataPicker、HiddenField、RadioButton、Calendar、FieldSet、CheckBox、TextArea、TextBox、NumberTextBox、Window共十四個子控制項。
感興趣的朋友可到下面的地址下載:
Coolite Studio (ASP.NET) Download
示範效果:
如何換膚?
方法有很多:
方法一:在Aspx檔案的Head標籤內加入
<head runat="server" lang="zh-cn">
<title>無標題頁</title>
<cool:ScriptContainer ID="ScriptContainer1" runat="server">
</cool:ScriptContainer>
<link href="對應皮膚CSS檔案的相應路徑" rel="stylesheet" type="text/css" />
</head>
方法二:在後置代碼中設定:
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Coolite.Web.UI.ScriptManager.RegisterSessionTheme(Coolite.Web.UI.Theme.Gray);
}
</script>
或者
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
HttpContext.Current.Session["Coolite.Theme"] = Coolite.Web.UI.Theme.Gray;
}
</script>
方法三:使用設定檔:
1<?xml version="1.0"?>
2
3<configuration>
4 <configSections>
5 <section name="coolite" type="Coolite.Web.UI.GlobalConfig"/>
6 </configSections>
7 <!-- COOLITE GLOBAL CONFIGURATION ATTRIBUTES -->
8 <!-- cleanResourceUrl = true|false
9 The Coolite controls can clean up the autogenerate WebResource Url so they look presentable.
10 Default is true -->
11 <!-- gzip = true|false
12 Whether to automatically render scripts with gzip compression.
13 Default is true. -->
14 <!-- scriptAdapter = Ext, jQuery, Prototype, YUI
15 Which script adapter to use.
16 Default is "Ext" -->
17 <!-- renderScripts = true|false
18 Whether to have the coolite controls output the required JavaScript includes or not.
19 Gives developer option of manually including required <script> files.
20 Default is true -->
21 <!-- renderStyles = true|false
22 Whether to have the coolite controls output the required StyleSheet includes or not.
23 Gives developer option of manually including required <link>/<style> files.
24 Default is true -->
25 <!-- scriptMode = Release, Debug
26 Whether to include the Release (condensed) or Debug (with documentation) JavaScript files
27 Default is "release" -->
28 <!-- theme = Default, Gray
29 Which embedded theme to use.
30 Default is "Default" -->
31 <coolite
32 cleanResourceUrl="true"
33 gzip="true"
34 scriptAdapter="Ext"
35 renderScripts="true"
36 renderStyles="true"
37 scriptMode="Release"
38 theme="Gray"
39 />
40</configuration>
本人測試時用的第一種方法,換膚後效果如下:
註:該控制項預設只包括二種風格的主題,更多的主題可到ExtJS官方網站下載: http://extjs.com/learn/Ext_Extensions#User_Themes
使用時只需把包內的內容複寫到對應目錄下即可。
預設語言是英文,如何設定為中文?
需到Ext官方網站下載Ext2.0,檔案夾裡有個ext-lang-zh_CN.js檔案,這是中文語言套件,添加到網站相應目錄下,然後用ScriptManager控制項匯入js檔案即可:
<asp:ScriptManager ID="ScriptManager2" runat="server">
<Scripts>
<asp:ScriptReference Path="對應目錄/ext-lang-zh_CN.js" />
</Scripts>
</asp:ScriptManager>