Coolite Toolkit 笔记五

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中间存在的距离。

posted @ 2010-08-06 13:39  William_Chen  阅读(606)  评论(0)  编辑  收藏  举报