Coolite Toolkit 笔记四
Coolite Toolkit 基本控件
一、按扭(Button)控件
Coolite Toolkit里同样提供有四种Button控件，他们分别是Button、ImageButton、LinkButton和SplitButton。
触发同步事件：
<ext:Button ID="Button1" runat="server" Text="点我" AutoPostBack="True" onclick="Button1_Click" />
使用Listeners为控件添加客户端方法：
<ext:Button ID="Button2" runat="server" Text="点我">
<Listeners>
<Click Handler="onClientClick()" />
</Listeners>
</ext:Button>
<script type="text/javascript">
function onClientClick() {
alert("Hello");
}
</script>
使用AjaxEvents为控件添加Ajax处理方法：
<ext:Button ID="Button3" runat="server" Text="点我">
<AjaxEvents>
<Click OnEvent="Button3_Click">
<EventMask ShowMask="true" />
</Click>
</AjaxEvents>
</ext:Button>
/******************************************************/
protected void Button3_Click(object sender, AjaxEventArgs e)
{
Ext.Msg.Alert("标题", "显示的消息内容").Show();
}
另外还有一个重要的特性就是按扭菜单项，可以给一个按扭添加菜单选项，使用如下：
<ext:Button ID="Button4" runat="server" Text="点我">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" Text="菜单项" runat="server"></ext:MenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
ImageButton通过设置按扭的图片让按扭呈现出不同的风格
<ext:ImageButton ID="ImageButton1"
runat="server"
ImageUrl="button/button.gif"
OverImageUrl="button/overButton.gif"
DisabledImageUrl="button/disabled.gif"
PressedImageUrl="button/pressed.gif">
<AjaxEvents>
<Click OnEvent="Button3_Click" />
</AjaxEvents>
</ext:ImageButton>
二、TextFiled控件
TextFiled控件等同于ASP.NET里的TextBox控件，主要进行文字数据录入或显示，NumberFiled控件专们用来进行数字录入的。EmptyText属性用来设置或获取显示输入数据提示信息。Note属性用来设置或获取静态描述信息，并可以通过NoteAlign属性设置信息的显示位置。
三、DataFiled控件
SelectedData属性得到所选择的日期
四、ComboBox控件
ComboBox控件的基本功能和.NET标准控件的DropDownList控件相同，不同之处在于DropDownList只能选择，不能进行编辑录入，如果用户需要一个既可手工输入又可以选择的功能来做条件筛选，DropDownList则实现不了，Coolite Toolkit正好弥补上了DropDownList的不足。使用方式两者都相差不大，下面是一个简单的示例：
<ext:ComboBox ID="ComboBox1" runat="server">
<Items>
<ext:ListItem Text="电信" Value="电信"/>
<ext:ListItem Text="移动" Value="移动"/>
<ext:ListItem Text="联通" Value="联通"/>
</Items>
</ext:ComboBox>
ComboxBox还提供了Triggers和Listeners
<ext:ComboBox ID="ComboBox2" runat="server" EmptyText="请选择或输入数据">
<Items>
<ext:ListItem Text="电信" />
<ext:ListItem Text="移动" />
<ext:ListItem Text="联通" />
</Items>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true" />
</Triggers>
<Listeners>
<Select Handler="this.triggers[0].show();" />
<BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
<TriggerClick Handler="if(index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
</Listeners>
</ext:ComboBox>
五、FieldSet控件
使用FieldSet来进行表单等界面布局分组
<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>
六、Panel控件
Coolite Toolkit所提供的Panel同样如此，只是他在ASP.NET的Panel基础上扩展了一些常用的功能点，包括动态设值，外嵌其他的Web也面等多项功能。
< ext:Panel ID ="Panel1" runat ="server" Height ="300" Title ="Title"
Collapsible ="true" Width ="300" >
< Body >
</ Body >
</ ext:Panel >
同FieldSet控件一样直接提供了公开属性设置是否允许折叠。如上html代码片段，在<body>标签里可以放置我们需要在界面上呈现是元素，除此之外它还提供了一个属性(Html)，通过该属性也可以设置其显示内容，如下：
Collapsible ="true" Width ="300" Html ="<h5>通过HTML属性设置其显示的内容</h5>" >
</ ext:Panel >
在使用该控件的时候需要注意，虽然<body>标签和Html属性都可以设置控件所呈现的内容，但是这里有一定的约束，<body>标签和Html属性不能同时使用。
通过属性设置其要呈现的内容，控件还提供了属性用来设置其将自动加载的数据(比如一个页面，类似与IFrame的功能)。
<ext:Panel ID="Panel3" runat="server" Height="100" Width="400" Title="Title">
<Body>
</Body>
</ext:Panel>
<script type="text/C#" runat="server">
protected void Page_load(object sender, EventArgs e)
{
this.Panel3.AutoLoad.Url = "http://xx.xx.xx.xx";
this.Panel3.AutoLoad.NoCache = true;
}
</script>
<ext:Panel ID="Panel3" runat="server" Height="125px" Title="自动加载内容"
Width="400px" Collapsible="true">
<Body>
</Body>
<AutoLoad Url="http://xx.xx.xx.xx"></AutoLoad>
</ext:Panel>
除了上面的实现方式外，也可以通过公开的方法LoadContent()实现动态加载一个页面呈现出来。
{
this .Panel3.LoadContent( " http://beniao.cnblogs.com " , true );
}
对Panel控件也提供了iframe的支持，Panel控件加载一个外部web页面也是可以以iframe的形式呈现的。
{
this .Panel3.AutoLoad.Url = " http://xx.xx.xx.xx " ;
this .Panel3.AutoLoad.Mode = LoadMode.IFrame;
this .Panel3.AutoLoad.NoCache = true ;
}
同样可以在LoadContent()方法中设置加载模式：
Coolite Toolkit的Panel的折叠展开功能也有他独有的特性，通过Listeners可以设置让其在展开的时候加载指定的Web页面，折叠的时候清除内容。
< AutoLoad Url ="http://www.cnblogs.com" Mode ="IFrame" NoCache ="true" ShowMask ="true" MaskMsg ="正在加载
"
/>
< Listeners >
< Expand Handler ="this.reload();" />
< Collapse Handler ="this.clearContent();" />
</ Listeners >
</ ext:Panel >
七、Window控件
窗体(Window)控件，这个控件多数时候是应用在做弹窗效果。
Title="Title">
<body></body>
</ext:Window>
通过设置ShowOnLoad="false|true"属性使其在页面加载的时候显示与否。 在需要显示的时候可以通过调用其客户端API接口，也可以调用服务端API接口实现。
Title="Title" ShowOnLoad="false">
<body></body>
<Listeners>
<Hide Handler="this.clearContent();" />
</Listeners>
</ext:Window>
<ext:Button ID="btnShowWindow" runat="server" Text="显示Window">
<Listeners>
<%--<Click Handler="#{Window1}.show();" />--%>
</Listeners>
<AjaxEvents>
<Click OnEvent="Show_Window"></Click>
</AjaxEvents>
</ext:Button>
<script type="text/C#" runat="server">
protected void Show_Window(object sneder, AjaxEventArgs e)
{
this.Window1.Show();
}
</script>
动态显示和隐藏（Show,Hide）、可拖拽性(Draggable)、(Modal)等。
<body>
态|不可拖拽应用示例<br />
不可拖拽：Draggable="false"<br />
摸态：Modal="true"<br />
</body>
<Listeners>
<Hide Handler="this.clearContent();" />
</Listeners>
</ext:Window>
<ext:Button ID="btnShowWindow" runat="server" Text="显示Window">
<Listeners>
<%--<Click Handler="#{Window1}.show();" />--%>
</Listeners>
<AjaxEvents>
<Click OnEvent="Show_Window"></Click>
</AjaxEvents>
</ext:Button>
<script type="text/C#" runat="server">
protected void Show_Window(object sneder, AjaxEventArgs e)
{
this.Window1.Show();
//this.Window1.Hide();
}
</script>
八、控件Menu和MenuPanel
Coolite Toolkit规定Menu控件需要一个容器来做依托，而这个让Menu依托的控件就是MenuPanel
<ext:MenuPanel ID="MenuPanel1" runat="server" Height="300" Title="Menu" Width="185"> <Menu> <Items> <ext:MenuItem ID="MenuItem1" runat="server" Text="Item1"> <Menu> <ext:Menu ID="Menu2" runat="server"> <Items> <ext:MenuItem ID="MenuItem2" runat="server" Text="SubItem1"> </ext:MenuItem> <ext:MenuItem ID="MenuItem3" runat="server" Text="SubItem2"> </ext:MenuItem> </Items> </ext:Menu> </Menu> </ext:MenuItem> <ext:MenuItem ID="MenuItem4" runat="server" Text="Item2"> </ext:MenuItem> <ext:MenuItem ID="MenuItem5" runat="server" Text="Item3"> </ext:MenuItem> <ext:MenuItem ID="MenuItem6" runat="server" Text="Item4"> </ext:MenuItem> </Items> </Menu></ext:MenuPanel>
MenuPanel里可以放置菜单项(MenuItem)，如果有子菜单，那么子菜单则对应于一个Menu控件，子菜单里的菜单项则又是通过菜单项(MenuItem)来体现。
后台代码实现如下：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
CreateMenuPanel();
}
}
private void CreateMenuPanel()
{
MenuPanel menuPanel = new MenuPanel();
menuPanel.Title = "帐套管理";
menuPanel.Width = new Unit(180);
Coolite.Ext.Web.MenuItem addAccount = new Coolite.Ext.Web.MenuItem("新增帐套");
addAccount.Icon = Icon.Add;
addAccount.Listeners.Click.Handler = "JavaScript:window.location.href='#';";
Coolite.Ext.Web.MenuItem whAccount = new Coolite.Ext.Web.MenuItem("维护帐套");
whAccount.Icon=Icon.Cmy;
Coolite.Ext.Web.MenuItem accountManage = new Coolite.Ext.Web.MenuItem("帐套管理");
accountManage.Icon = Icon.Database;
Coolite.Ext.Web.Menu subMenu = new Coolite.Ext.Web.Menu();
Coolite.Ext.Web.MenuItem backMenuItem = new Coolite.Ext.Web.MenuItem("备份帐套");
backMenuItem.Icon = Icon.DatabaseSave;
backMenuItem.Listeners.Click.Handler = "JavaScript:window.open('#')";
subMenu.Items.Add(backMenuItem);
Coolite.Ext.Web.MenuItem reMenuItem = new Coolite.Ext.Web.MenuItem("恢复帐套");
reMenuItem.Icon = Icon.DatabaseGo;
reMenuItem.Listeners.Click.Handler = "JavaScript:window.open('#')";
subMenu.Items.Add(reMenuItem);
accountManage.Menu.Add(subMenu);
menuPanel.Menu.Items.Add(addAccount);
menuPanel.Menu.Items.Add(whAccount);
menuPanel.Menu.Items.Add(accountManage);
menuPanel.Menu.Listeners.ItemClick.Fn = "onItemClick";
accountDiv.Controls.Add(menuPanel);
}
九、Accordion控件
Accordion的功能非常适用，使用很简单，轻轻松松的就可以构建一个可折叠的界面展示应用效果。
<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>
十、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>
Coolite Toolkit的ToolBar控件功能非常强大，除了实现上面这种最基本的工具栏外，还可以设计出功能更加强大的。准确的说Coolite Toolkit为很多控件都提供了许多的功能扩展功能，这类控件主要是Tree、Menu 等等之类的控件。
<ext:Toolbar ID="Toolbar2" runat="server" Width="300"> <Items> <ext:ToolbarButton runat="server" Text="下拉菜单" Icon="ArrowDown"> <Menu> <ext:Menu ID="Menu1" runat="server"> <Items> <ext:MenuItem ID="MenuItem1" runat="server" Text="博客园"> <Menu> <ext:Menu runat="server"> <Items> <ext:MenuItem Text="博客园" Href="http://www.cnblogs.com"/> <ext:MenuItem Text="Beniao" Href="http://beniao.cnblogs.com"/> </Items> </ext:Menu> </Menu> </ext:MenuItem> <ext:MenuSeparator runat="server"/> <ext:MenuItem ID="MenuItem2" runat="server" Text="选择日期" Icon="Calendar"> <Menu> <ext:DateMenu ID="DateMenu1" runat="server"> <Picker ID="Picker1" runat="server"> <Listeners> </Listeners> </Picker> </ext:DateMenu> </Menu> </ext:MenuItem> </Items> </ext:Menu> </Menu> </ext:ToolbarButton> <ext:ToolbarButton Text="其他" runat="server" Icon="ApplicationHome" /> </Items></ext:Toolbar>
