天天看點

Coolite Toolkit學習筆記四:容器控件之FiledSet、Panel和Window

一、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="正在加載

Coolite Toolkit學習筆記四:容器控件之FiledSet、Panel和Window
Coolite Toolkit學習筆記四:容器控件之FiledSet、Panel和Window

"/>

    <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,如需轉載請自行聯系原作者

繼續閱讀