Coolite Toolkit学习笔记六：常用控件Accordion、ToolBar、ToolTip

最新推荐文章于 2019-07-06 05:04:06 发布

???Sir

最新推荐文章于 2019-07-06 05:04:06 发布

阅读量78

点赞数

一、Accordion控件
Accordion的功能非常适用，使用很简单，轻轻松松的就可以构建一个可折叠的界面展示应用效果。相信大多数做ASP.NET开发的朋友都使用过 ASP.NET AJAX Control Toolkit，它里面也提供有Accordion控件，详细可以查看其在线示例。Colite Toolkit所提供的Accordion控件的使用和ASP.NET AJAX Control Toolkit里提供的Accordion差别不大，不同的是Coolite Toolkit的控件必须放置在一个容器控件里（比如：Panel）。

< ext:Panel ID ="Panel1" runat ="server" Height ="300" Title ="系统菜单" Width ="200" >
     < Body >
         < ext:Accordion ID ="Accordion1" runat ="server" Animate ="true" >
         < ext:Panel ID ="basePanel" runat ="server" Border ="false" Title ="基础设置" >
             < Body >
             </ Body >
         </ ext:Panel >
         < ext:Panel ID ="accountPanel" runat ="server" Border ="false" Collapsed ="true" Title ="帐套管理" >
             < Body >
                 < div style ="margin-left:50px;" >
                     < ul style ="float:left;" >
                         < li > 新增帐套 </ li >
                         < li > 维护帐套 </ li >
                         < li > 帐套备份 </ li >
                         < li > 帐套恢复 </ li >
                     </ ul >
                 </ div >
             </ Body >
         </ ext:Panel >
         < ext:Panel ID ="userPanel" runat ="server" Border ="false" Collapsed ="true" Title ="用户管理" >
             < Body >
             </ Body >
         </ ext:Panel >
       </ ext:Accordion >
     </ Body >
</ ext:Panel >

得到的效果如下，这个界面相比ASP.NET AJAX Control Toolkit的Accordion要好看得多。

全部自己去定义里面的菜单项好象很麻烦，这里可以利用上一篇文章中介绍的MenuPanel来实现，个人感觉效果更好，更方便快速。

Code

<ext:Accordion ID="Accordion1" runat="server" Animate="true">

<ext:MenuPanel ID="MenuPanel1" runat="server" Title="帐套管理">

<Items>

<ext:MenuItem Text="新增帐套" Href="#" Icon=Add/>

<ext:MenuItem Text="维护帐套" Href="#" Icon="Cmy" />

<ext:MenuItem Text="帐套备份" Href="#" Icon=DatabaseSave/>

<ext:MenuItem Text="帐套恢复" Href="#" Icon="DatabaseGo"/>

</Items>

</Menu>

</ext:MenuPanel>

<ext:Panel ID="accountPanel" runat="server" Border="false" Collapsed="true" Title="帐套管理">

<Body>

</ul>

</div>

</Body>

</ext:Panel>

<ext:Panel ID="userPanel" runat="server" Border="false" Collapsed="true" Title="用户管理">

<Body>

</Body>

</ext:Panel>

</ext:Accordion>

关于怎么获取所点项的相关参数请查看本系列笔记第四篇。

二、ToolBar和ToolTip控件
工具栏到处可见，在我们的项目开发中同样也需要工具栏(ToolBar)以及动态提示(ToolTip)，以方便用户操作。

< ext:Toolbar ID ="Toolbar1" runat ="server" Width ="300" >
     < Items >
         < ext:ToolbarButton ID ="btnAdd" Text ="新增" Icon ="UserAdd" >
             < ToolTips >
                 < ext:ToolTip ID ="ToolTip1" Html ="新增用户" runat ="server" />
             </ ToolTips >
         </ ext:ToolbarButton >
         < ext:ToolbarButton ID ="btnEdit" Text ="编辑" Icon ="UserEdit" Enabled ="false" />
         < ext:ToolbarButton ID ="btnDelete" Text ="删除" Icon ="UserDelete" Enabled ="false" />
         < ext:ToolbarSeparator runat ="server" />
         < ext:ToolbarButton ID ="btnRefresh" Text ="刷新" Icon ="Reload" Enabled ="false" />
         < ext:ToolbarSeparator runat ="server" />
         < ext:ToolbarButton ID ="tbSave" Text ="保存" Icon ="Accept" />
         < ext:ToolbarButton ID ="tbCancel" Text ="取消" Icon ="Cancel" />
     </ Items >
</ ext:Toolbar >