一、FieldSet控件
FieldSet控件在開發中使用率還是很高的,畢竟Web中微軟沒有提供Group控件,通常都是使用FieldSet來進行表單等界面布局分組。在Coolite Toolkit中則專門提供了這樣一個控件,同時還為其附加了很多其他的功能屬性和方法。
<ext:FieldSet ID="FieldSet1" runat="server" Collapsible="True" Height="200px" Title="FieldSet分組" Width="200px">
<Body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>日期:</td>
<td>
<ext:DateField ID="DateField2" runat="server"/>
</td>
</tr>
</table>
</Body>
</ext:FieldSet>
Title、Height以及Width這些最基本的屬性完全可以不去記憶,Collapsible屬性是用來設定FieldSet是可折疊狀态。上面代碼片段的遠行效果如下所示:
二、Panel控件
前面分析了FieldSet控件,可以用來做界面布局的分組,以及通過相關屬性設定使其成為更為進階的應用操作。FieldSet所具備的這些特性對于Panel來說也是同樣具備的。在ASP.NET裡也提供得有Panel控件,那麼Coolite Toolit所提供的相比ASP.NET裡的Panel有什麼特色呢?呵呵,特色可多了,請你繼續看下面......
Panel控件我個人了解就是一個容器控件,不用它我自己随便通過一個html标簽然後設定其runat="server"一樣的可以達到等同的效果。Coolite Toolkit所提供的Panel同樣如此,隻是他在ASP.NET的Panel基礎上擴充了一些常用的功能點,包括動态設值,外嵌其他的Web也面等多項功能。
<%--<ext:Panel ID="Panel2" runat="server" Height="300" Title="Title">--%>
<ext:Panel ID="Panel1" runat="server" Height="300" Title="Title"
Collapsible="true" Width="300">
</ext:Panel>
同FieldSet控件一樣直接提供了公開屬性設定是否允許折疊。如上html代碼片段,在<body>标簽裡可以放置我們需要在界面上呈現是元素,除此之外它還提供了一個屬性(Html),通過該屬性也可以設定其顯示内容,如下:
<ext:Panel ID="Panel2" runat="server" Height="100" Title="Title"
Collapsible="true" Width="300" Html="<h5>通過HTML屬性設定其顯示的内容</h5>">
在使用該控件的時候需要注意,雖然<body>标簽和Html屬性都可以設定控件所呈現的内容,但是這裡有一定的限制,<body>标簽和Html屬性不能同時使用。
通過屬性設定其要呈現的内容,控件還提供了屬性用來設定其将自動加載的資料(比如一個頁面,類似與IFrame的功能)。
<ext:Panel ID="Panel3" runat="server" Height="100" Width="400" Title="Title">
<script type="text/C#" runat="server">
protected void Page_load(object sender, EventArgs e)
{
this.Panel3.AutoLoad.Url = "http://beniao.cnblogs.com";
this.Panel3.AutoLoad.NoCache = true;
}
</script>
<ext:Panel ID="Panel3" runat="server" Height="125px" Title="自動加載内容"
Width="400px" Collapsible="true">
<AutoLoad Url="http://beniao.cnblogs.com"></AutoLoad>
除了上面的實作方式外,也可以通過公開的方法LoadContent()實作動态加載一個頁面呈現出來。
protected void Page_load(object sender, EventArgs e)
{
this.Panel3.LoadContent("http://beniao.cnblogs.com", true);
}
前面提到iframe,這個東西在我們平時開發中的使用率也是非常高的,Coolite Toolkit那當然也不會遺忘他的存在,對Panel控件也提供了iframe的支援,Panel控件加載一個外部web頁面也是可以以iframe的形式呈現的。
this.Panel3.AutoLoad.Url = "http://beniao.cnblogs.com";
this.Panel3.AutoLoad.Mode = LoadMode.IFrame;
this.Panel3.AutoLoad.NoCache = true;
同樣可以在LoadContent()方法中設定加載模式:
this.Panel3.LoadContent(new LoadConfig("http://beniao.cnblogs.com", LoadMode.IFrame, true));
除了上述特性,Coolite Toolkit的Panel的折疊展開功能也有他獨有的特性,通過Listeners可以設定讓其在展開的時候加載指定的Web頁面,折疊的時候清除内容。
<ext:Panel ID="Panel4" runat="server" Title="展開時加載|折疊時清除" Width="300" Height="100" Collapsible="true">
<AutoLoad Url="http://www.cnblogs.com" Mode="IFrame" NoCache="true" ShowMask="true" MaskMsg="正在加載


"/>
<Listeners>
<Expand Handler="this.reload();" />
<Collapse Handler="this.clearContent();" />
</Listeners>
三、Window控件
窗體(Window)控件,這個控件多數時候是應用在做彈窗效果。很簡單的說,我點一下按扭或是其他可同僚件驅動的元件,立馬給我彈出一個視窗出來,Window控件可以說是專門來解決這一技術需求。
<ext:Window ID="Window1" runat="server" Collapsible="true" Icon="Application"
Title="Title">
<body></body>
</ext:Window>
直接從工具箱裡拖拽一個Window控件到界面上,預設是可折疊、可關閉且随着頁面的加載而顯示的。可以通過設定ShowOnLoad="false|true"屬性使其在頁面加載的時候顯示與否。
在需要顯示的時候可以通過調用其用戶端API接口,也可以調用服務端API接口實作。
Title="Title" ShowOnLoad="false">
<Hide Handler="this.clearContent();" />
<ext:Button ID="btnShowWindow" runat="server" Text="顯示Window">
<%--<Click Handler="#{Window1}.show();" />--%>
<AjaxEvents>
<Click OnEvent="Show_Window"></Click>
</AjaxEvents>
</ext:Button>
protected void Show_Window(object sneder, AjaxEventArgs e)
this.Window1.Show();
Window控件我個人了解他也是一個容器控件,隻不過他比其他的控件使用更為靈活,功能更強大,比如動态顯示和隐藏(Show,Hide)、可拖拽性(Draggable)、摸态(Modal)等。
<ext:Window ID="Window1" runat="server" Collapsible="true" Icon="Application" Width="300"
Draggable="false" Modal="true" Title="摸态|不可拖拽應用示例" ShowOnLoad="false">
<body>
摸态|不可拖拽應用示例<br />
不可拖拽:Draggable="false"<br />
摸态:Modal="true"<br />
</body>
//this.Window1.Hide();
本文轉自 beniao 51CTO部落格,原文連結:http://blog.51cto.com/beniao/240068,如需轉載請自行聯系原作者