Coolite Toolkit 常用控件
1、TreePanel
Coolite Toolkit中的Tree控件和Menu控件一样不能独立使用,他们必须依托与容器控件,理所当然Tree控件就依托于TreePanel 控件了。
使用TopBar来定制一个树的顶部工具栏,如下代码片段:
<
ext:TreePanel
ID
="tPanel"
runat
="server"
Height
="300"
Title
="树控件学习"
Icon
="BookOpen"
Width
="180"
>
<
TopBar
>
<
ext:Toolbar
runat
="server"
>
<
Items
>
<
ext:Button
runat
="server"
Text
="全部展开"
Icon
="ArrowOut"
>
<
Listeners
>
<
Click
Handler
="#{tPanel}.expandAll();"
/>
</
Listeners
>
</
ext:Button
>
<
ext:Button
runat
="server"
Text
="全部折叠"
Icon
="ArrowIn"
>
<
Listeners
>
<
Click
Handler
="#{tPanel}.collapseAll();"
/>
</
Listeners
>
</
ext:Button
>
</
Items
>
</
ext:Toolbar
>
</
TopBar
>
</
ext:TreePanel
>
定义了一个根节点下有多个子节点的示例:
<
ext:TreePanel
ID
="tPanel"
runat
="server"
Height
="300"
Title
="树控件学习"
Icon
="BookOpen"
Width
="180"
>
<
TopBar
>
<
ext:Toolbar
runat
="server"
>
<
Items
>
<
ext:Button
runat
="server"
Text
="全部展开"
Icon
="ArrowOut"
>
<
Listeners
>
<
Click
Handler
="#{tPanel}.expandAll();"
/>
</
Listeners
>
</
ext:Button
>
<
ext:Button
runat
="server"
Text
="全部折叠"
Icon
="ArrowIn"
>
<
Listeners
>
<
Click
Handler
="#{tPanel}.collapseAll();"
/>
</
Listeners
>
</
ext:Button
>
</
Items
>
</
ext:Toolbar
>
</
TopBar
>
<
Root
>
<
ext:TreeNode
Text
="歌曲列表"
Expandable
="True"
>
<
Nodes
>
<
ext:TreeNode
Text
="一生有你"
Icon
="Music"
/>
<
ext:TreeNode
Text
="擦肩而过"
Icon
="Music"
/>
<
ext:TreeNode
Text
="寂寞在唱歌"
Icon
="Music"
/>
<
ext:TreeNode
Text
="等一分钟"
Icon
="Music"
/>
<
ext:TreeNode
Text
="依然在一起"
Icon
="Music"
/>
</
Nodes
>
</
ext:TreeNode
>
</
Root
>
</
ext:TreePanel
>
可以通过控件的Listeners属性给控件注册一个事件,通过事件来获取所点击项的值。
--需要动态创建树结点,异步加载。
二、Tabpanel
TabPanel控件使用非常简单,但是功能却非常强大,它同MenuPanel、TreePanel一样提供了很多的集合属性,可以定制出丰富的应用。其中用得最多的就是他的Tabs属性,用于定义子标签选项,可参考下图所示:

其中content.html的代码如下代码片段,下图为运行效果截图:
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
></
title
>
<
style
type
="text/css"
>
body{font-size:12px;}
</
style
>
</
head
>
<
body
>
TabPanel控件学习
</
body
>
</
html
>

TabPanel最灵活的是动态的创建子标签选项,不能通过同步的事件驱动去创建,一但页面PostBack新创建的所有标签选项将被全部清除。如果一定要通过服务端后台代码去动态创建,可使用Coolite Toolkit所提供的AjaxEvent机制。
protected
void
CreataTab_Click(
object
sender, AjaxEventArgs e)
{
var tab
=
new
Tab(
"
通过AjaxEvent新增Tab
"
);
tab.TabIndex
=
short
.Parse(
"
11
"
);
tab.ID
=
"
tabID
"
;
tab.AutoLoad.Url
=
"
http://www.cnblogs.com
"
;
tab.AutoLoad.NoCache
=
true
;
tab.AutoLoad.Mode
=
LoadMode.IFrame;
this
.tabPanel.Tabs.Add(tab);
this
.tabPanel.ActiveTab
=
tab;
}
<
ext:Button
ID
="btnCreateTab"
runat
="server"
Text
="动态添加子标签选项"
>
<
AjaxEvents
>
<
Click
OnEvent
="CreataTab_Click"
>
<
EventMask
ShowMask
="true"
Msg
="正在加载
"
/>
</
Click
>
</
AjaxEvents
>
</
ext:Button
>
TabPanel提供了相应的客户端API来完成这些操作。
<
ext:Button
ID
="btnClient"
runat
="server"
Text
="添加Tab(Client)"
>
<
Listeners
>
<
Click
Handler
="addTab(#{tabPanel}, 'tabCnblogs', 'http://www.cnblogs.com');"
/>
</
Listeners
>
</
ext:Button
>
通过JavaScript方法addTab()方法动态创建,三个参数分别为:TabPanel控件ID,新创建的Tab的ID,西创建的Tab所呈现的内容路径。
<
script type
=
"
text/javascript
"
>
function
addTab(tabPanel, id, url) {
var
tab
=
tabPanel.getComponent(id);
if
(
!
tab) {
tab
=
tabPanel.add({
id: id,
title: url,
closable:
true
,
autoLoad: {
showMask:
true
,
url: url,
mode:
'
iframe
'
,
maskMsg:
'
正在加载
'
}
});
}
tabPanel.setActiveTab(tab);
}
<
/
script>
客户端创建的方式是纯Ext的操作方式,TabPanel提供了API可直接获取指定id的子Tab是否存在,使用这一功能就可以完美的处理互斥,以创建出唯一的Tab子标签选项。

TabPanel使用得多的就是用来处理多标签选项卡,另外多数时候是用作容器,其容器功能和Panel、Window等基本相同。就拿上一篇文章中创建的树做示例吧,现在需要将树显示在TabPanel的一个子标签选项里,可以直接调用TabPanel的客户端API方法addTab将一个存在的容器类型控件添加到TabPanel,使其成为TabPanel的子Tab。
<
ext:ScriptManager
ID
="ScriptManager1"
runat
="server"
>
<
Listeners
>
<
DocumentReady
Handler
="addToTabPanel();"
/>
</
Listeners
>
</
ext:ScriptManager
>
<
script
type
="text/javascript"
>
function addToTabPanel() {
tabPanel.addTab(myTreePanel);
}
</
script
>
<
ext:TreePanel
ID
="myTreePanel"
runat
="server"
Title
="音乐播放"
Width
="160"
>
<
Root
>
<
ext:TreeNode
Text
="歌曲列表"
Expandable
="True"
Icon
="Cd"
>
<
Nodes
>
<
ext:TreeNode
Text
="水木年华"
Icon
="Music"
>
<
Nodes
>
<
ext:TreeNode
Text
="一生有你"
Icon
="ControlPlay"
/>
<
ext:TreeNode
Text
="完美世界"
Icon
="ControlPlay"
/>
</
Nodes
>
</
ext:TreeNode
>
<
ext:TreeNode
Text
="宇桐非"
Icon
="Music"
>
<
Nodes
>
<
ext:TreeNode
Text
="擦肩而过"
Icon
="ControlPlay"
/>
<
ext:TreeNode
Text
="不要放弃"
Icon
="ControlPlay"
/>
</
Nodes
>
</
ext:TreeNode
>
<
ext:TreeNode
Text
="寂寞在唱歌"
Icon
="Music"
>
<
Nodes
>
<
ext:TreeNode
Text
="阿桑"
Icon
="ControlPlay"
/>
</
Nodes
>
</
ext:TreeNode
>
<
ext:TreeNode
Text
="徐誉滕"
Icon
="Music"
>
<
Nodes
>
<
ext:TreeNode
Text
="等一分钟"
Icon
="ControlPlay"
/>
</
Nodes
>
</
ext:TreeNode
>
<
ext:TreeNode
Text
="马天宇"
Icon
="Music"
>
<
Nodes
>
<
ext:TreeNode
Text
="依然在一起"
Icon
="ControlPlay"
HrefTarget
="http://www.baidu.com"
/>
</
Nodes
>
</
ext:TreeNode
>
</
Nodes
>
</
ext:TreeNode
>
</
Root
>
</
ext:TreePanel
>

三、FormLayout与FormPanel
FormLayout在开发中使用频率非常高,使用它可快速、方便的实现表单界面布局。
<
ext:Panel
ID
="Panel1"
runat
="server"
Title
="用户登录"
Width
="300"
BodyStyle
="padding:5px;"
>
<
Body
>
<
ext:FormLayout
ID
="FormLayout1"
runat
="server"
Width
="150"
>
<
ext:Anchor
Horizontal
="100%"
>
<
ext:TextField
ID
="tfUserName"
runat
="server"
FieldLabel
="用户名"
/>
</
ext:Anchor
>
<
ext:Anchor
Horizontal
="100%"
>
<
ext:TextField
ID
="tfPassword"
runat
="server"
FieldLabel
="用户密码"
/>
</
ext:Anchor
>
<
ext:Anchor
Horizontal
="100%"
>
<
ext:Button
ID
="btnLogin"
runat
="server"
Text
="登录"
/>
</
ext:Anchor
>
</
ext:FormLayout
>
</
Body
>
</
ext:Panel
>
Coolite Toolkit规定FromLayout控件必须放置在一个容器控件里,如上则将其放置在Panel控件里,通过FormLayout布局了一个用户登录界面,运行效果如下所示:

下面基于这个上面来做一些调整。现在要实现文本框没有输入数据的时候则提示用户输入,并为其加上非空验证,通过AjaxEvents提供表单提交的事件处理函数,通过Listeners提供表单的提交前的客户端验证功能。相关代码如下:
<
Body
>
<
ext:FormLayout
ID
="FormLayout1"
runat
="server"
Width
="150"
>
<
ext:Anchor
Horizontal
="100%"
>
<
ext:TextField
ID
="tfUserName"
runat
="server"
FieldLabel
="用户名"
EmptyText
="请输入用户名"
AllowBlank
="false"
BlankText
="用户名不能为空!"
/>
</
ext:Anchor
>
<
ext:Anchor
Horizontal
="100%"
>
<
ext:TextField
ID
="tfPassword"
runat
="server"
FieldLabel
="用户密码"
EmptyText
="请输入登录密码"
InputType
="Password"
AllowBlank
="false"
BlankText
="用户密码不能为空!"
/>
</
ext:Anchor
>
</
ext:FormLayout
>
</
Body
>
<
Buttons
>
<
ext:Button
ID
="btnLogin"
Text
="登录"
runat
="server"
Icon
="Accept"
>
<
AjaxEvents
>
<
Click
OnEvent
="LoginClick"
>
<
EventMask
ShowMask
="true"
Msg
="正在登录系统
"
MinDelay
="500"
/>
</
Click
>
</
AjaxEvents
>
<
Listeners
>
<
Click
Handler
="if(!#{tfUserName}.validate() || !#{tfPassword}.validate()) {
Ext.Msg.alert('错误提示','用户名和用户密码不能为空!');
return false;
}"
/>
</
Listeners
>
</
ext:Button
>
<
ext:Button
ID
="btnCancel"
Text
="清空"
runat
="server"
Icon
="Cancel"
>
<
AjaxEvents
>
<
Click
OnEvent
="CancelClick"
/>
</
AjaxEvents
>
</
ext:Button
>
</
Buttons
>
</
ext:Panel
>
FormPanel其使用方法和Panel基本相同,通过FormPanel+FormLayout组合设计出来的UI界面效果更佳。如下邮件发送表单示例:
<
ext:FormPanel
ID
="FormPanel1"
runat
="server"
BodyStyle
="padding:5px;"
ButtonAlign
="Right"
Frame
="true"
Title
="邮件发送表单"
Width
="450"
>
<
Body
>
<
ext:FormLayout
ID
="FormLayout2"
runat
="server"
LabelWidth
="60"
>
<
ext:Anchor
Horizontal
="100%"
>
<
ext:TextField
ID
="tfTitle"
runat
="server"
FieldLabel
="邮件主题"
AllowBlank
="false"
BlankText
="邮件主题不能为空"
/>
</
ext:Anchor
>
<
ext:Anchor
Horizontal
="100%"
>
<
ext:TextArea
ID
="tfContent"
runat
="server"
FieldLabel
="邮件内容"
Height
="150"
/>
</
ext:Anchor
>
<
ext:Anchor
Horizontal
="100%"
>
<
ext:FileUploadField
ID
="upAttachment"
runat
="server"
FieldLabel
="邮件附件"
ButtonText
="选择附件"
/>
</
ext:Anchor
>
<
ext:Anchor
Horizontal
="100%"
>
<
ext:DateField
ID
="tfTime"
runat
="server"
FieldLabel
="发送时间"
/>
</
ext:Anchor
>
</
ext:FormLayout
>
</
Body
>
<
Buttons
>
<
ext:Button
ID
="btnSend"
runat
="server"
Icon
="WorldGo"
Text
="发送"
>
<
AjaxEvents
>
<
Click
OnEvent
="SendClick"
/>
</
AjaxEvents
>
</
ext:Button
>
</
Buttons
>
</
ext:FormPanel
>

需要注意的就是FormLayout 的LabelWidth属性,设置LabelWidth属性值调整字段名和TextBox中间存在的距离。