TabContainer通常是与TabPanel控件配合使用的,目前很多控件库以及控件产品里基本都有这两个控件,标准控件里虽然没 有,在ASP.NET AJAX里已经提供了这两个控件,用他们可以很方便的来定制选项卡级的开发。但是不同的控件都有他的优点和不足之处。

比如ASP.NET AJAX里的我个人觉得界面效果太难看了,即使使用CSS也不好控制开发的灵活性不够好;如果说看界面我觉得RadControls这一套控件产品的效果 很好,皮肤有近20套,开发的灵活性也比较高,但是此控件的缺点则是运行太慢,会不间断的下载皮肤所需要的图片文件。相比之下,ExtJS的 TabContainer和TabPanel我个人比较喜欢使用,开发灵活度高,ExtJS自身就提供了一套比较好看的皮肤。除非有特别需求我们完全可以 不用做任何修改,先看看下图:
ExtJs的.NET控件----TabContainer和TabPanel
上图效果便是使用ExtJS的.NET控件开发出来的,下面我将简单的介绍下ExtJS的.NET控件TabContainer和TabPanel控件的常用属性的使用和几个常用的客户端方法。

有了ExtJS的.NET版控件,在此基础上开发ExtJS的应用就不用在去写太多的JavaScript代码来构件界面元素了,如使用 标准控件一样,只需要从工具箱里拖拽到页面上便OK。需要注意的是ExtJS的.NET控件需要ASP.NET AJAX的ScriptManager的支持,因此在使用ExtJS的.NET控件时候如同使用ASP.NET AJAX控件一样,需要在页面上放置一个ScriptManager控件。

一、注册控件

要使用ExtJS的.NET控件首先得将控件库进行注册,最好的方式就是将其添加到VS工具栏中,直接拖拽到页面就可以使用了。此外也可以通过引用注册,将库Copy到项目bin下,然后到页面进行注册:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1<%@Registerassembly="ExtExtenders"namespace="ExtExtenders"tagprefix="cc1"%>

OK,此时我们就可以使用ExtJS的.NET控件了。

二、TabContainer控件

TabContainer控件只是作为一个选项容器,就好碗一样,他就只是一个单纯的玩,我们可以向里面装入大米。如下:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1<cc1:TabContainerID="tabs"runat="server"ActiveTabIndex="0">
2</cc1:TabContainer>

TabContainer控件常用属性如下:
ActiveTabIndex----当前**的TabPanel的TabIndex
enableTabScroll----True,false
Height
Width
ID-----这个不用说了吧。

三、TabPanel控件
TabPanel在TabContainer的内部使用,定制多个TabPanel就形成了选项卡的效果。常用属性有 TabIndex和closable,closable表示是否开启关闭功能,TabIndex则是在动态控制和操作的时候起作用,ID就不说了,最重 要。如下:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1<cc1:TabPanelrunat="server"HeaderText="我的工作台"
2closable="False"
3ID="TabPanel1"
4TabIndex="0">
5<ContentTemplate>
6<iframesrc="Home/1.aspx"frameborder="0"></iframe>
7</ContentTemplate>
8</cc1:TabPanel>

四、示例演示

ExtJs的.NET控件----TabContainer和TabPanelExtJs的.NET控件----TabContainer和TabPanel此示例运行效果见本文上面的参考图
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1ExtJs的.NET控件----TabContainer和TabPanel<cc1:TabContainerID="tabs"runat="server"ActiveTabIndex="0"
2ExtJs的.NET控件----TabContainer和TabPanelHeight="400px"Width="500px"enableTabScroll="True">
3ExtJs的.NET控件----TabContainer和TabPanel<cc1:TabPanelrunat="server"HeaderText="我的工作台"closable="False"ID="TabPanel1"TabIndex="0">
4ExtJs的.NET控件----TabContainer和TabPanel<ContentTemplate>
5ExtJs的.NET控件----TabContainer和TabPanel<iframesrc="Home/1.aspx"frameborder="0"></iframe>
6ExtJs的.NET控件----TabContainer和TabPanel</ContentTemplate>
7ExtJs的.NET控件----TabContainer和TabPanel</cc1:TabPanel>
8ExtJs的.NET控件----TabContainer和TabPanel<cc1:TabPanelrunat="server"HeaderText="我的工作台"closable="False"ID="TabPanel2">
9ExtJs的.NET控件----TabContainer和TabPanel<ContentTemplate>
10ExtJs的.NET控件----TabContainer和TabPanel<iframesrc="Home/2.aspx"frameborder="0"></iframe>
11ExtJs的.NET控件----TabContainer和TabPanel</ContentTemplate>
12ExtJs的.NET控件----TabContainer和TabPanel</cc1:TabPanel>
13ExtJs的.NET控件----TabContainer和TabPanel<cc1:TabPanelrunat="server"HeaderText="我的工作台"closable="true"ID="TabPanel3">
14ExtJs的.NET控件----TabContainer和TabPanel<ContentTemplate>
15ExtJs的.NET控件----TabContainer和TabPanel<iframesrc="Home/3.aspx"frameborder="0"></iframe>
16ExtJs的.NET控件----TabContainer和TabPanel<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox>
17ExtJs的.NET控件----TabContainer和TabPanel</ContentTemplate>
18ExtJs的.NET控件----TabContainer和TabPanel</cc1:TabPanel>
19ExtJs的.NET控件----TabContainer和TabPanel<cc1:TabPanelrunat="server"HeaderText="我的工作台"closable="true"ID="TabPanel4">
20ExtJs的.NET控件----TabContainer和TabPanel<ContentTemplate>
21ExtJs的.NET控件----TabContainer和TabPanel<iframesrc="Home/4.aspx"frameborder="0"></iframe>
22ExtJs的.NET控件----TabContainer和TabPanel<asp:TextBoxID="TextBox2"runat="server"></asp:TextBox>
23ExtJs的.NET控件----TabContainer和TabPanel</ContentTemplate>
24ExtJs的.NET控件----TabContainer和TabPanel</cc1:TabPanel>
25ExtJs的.NET控件----TabContainer和TabPanel<cc1:TabPanelrunat="server"HeaderText="移出这个"closable="False"ID="tabRemove">
26ExtJs的.NET控件----TabContainer和TabPanel</cc1:TabPanel>
27ExtJs的.NET控件----TabContainer和TabPanel<cc1:TabPanelrunat="server"HeaderText="禁用"closable="False"ID="tabEnable">
28ExtJs的.NET控件----TabContainer和TabPanel</cc1:TabPanel>
29ExtJs的.NET控件----TabContainer和TabPanel<cc1:TabPanelrunat="server"HeaderText="我的工作台"closable="False"ID="TabPanel7">
30ExtJs的.NET控件----TabContainer和TabPanel</cc1:TabPanel>
31ExtJs的.NET控件----TabContainer和TabPanel<cc1:TabPanelrunat="server"HeaderText="我的工作台"closable="False"ID="TabPanel8">
32ExtJs的.NET控件----TabContainer和TabPanel</cc1:TabPanel>
33ExtJs的.NET控件----TabContainer和TabPanel<cc1:TabPanelrunat="server"HeaderText="我的工作台"closable="False"ID="TabPanel9">
34ExtJs的.NET控件----TabContainer和TabPanel</cc1:TabPanel>
35ExtJs的.NET控件----TabContainer和TabPanel<cc1:TabPanelrunat="server"HeaderText="我的工作台"closable="False"ID="TabPanel10">
36ExtJs的.NET控件----TabContainer和TabPanel</cc1:TabPanel>
37ExtJs的.NET控件----TabContainer和TabPanel<cc1:TabPanelrunat="server"HeaderText="我的工作台"closable="False"ID="TabPanel11">
38ExtJs的.NET控件----TabContainer和TabPanel</cc1:TabPanel>
39ExtJs的.NET控件----TabContainer和TabPanel</cc1:TabContainer>

1. 动态添加选项

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1//动态添加一个TabPanel
2functionaddTabPanel()
3{
4vartabs=$find("tabs");
5vartabPanel=tabs.TabPanel;
6tabPanel.add(
7{
8title:"新建Tab",
9iconCls:"tabs",
10html:"内容",
11closeble:true
12}
13).show();
14}

在需要动态添加TabPanel的地方直接调用此方法就可以完成添加了。

2. 删除选项

删除选项目可以通过JavaScript来实现,也可以直接启用关闭功能(将closable设置为true)来实现。

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1functionremoveTabPanel()
2{
3vartabs=$find("tabs");
4//根据ID移出TabPanel
5tabs.removeTab("tabRemove");
6}


3. 禁用选项
这项功能使用率不是很高,可以在JavaScript里通过enableTab()方法根据TabPanel的ID来控制。

本文示例代码下载

注:原创文章欢迎转载,但请注明出处. 出处:http://beniao.cnblogs.com 或 http://www.cnblogs.com 作者:Beniao

相关文章: