[推薦]一個封裝了Ext JavaScript Framework的ASP.NET伺服器控制項:Coolite Studio (ASP.NET)

來源:互聯網
上載者:User
使用過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>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.