asp.net Coolite TablePanel使用

其中用得最多的就是他的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.jb51.net";
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.jb51.net');" />
</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。

赞 (0)

相关推荐

  • Asp.net中DataTable导出到Excel的方法介绍

    复制代码 代码如下: #region  DataTable导出到Excel        /// <summary>        /// DataTable导出到Excel        /// </summary>        /// <param name="pData">DataTable</param>        /// <param name="pFileName">导出文件名</p

  • ASP.NET DataTable去掉重复行的2种方法

    第一种,使用Linq查询表达式,code如下 DataTable testtable = new DataTable(); testtable.Columns.Add("ID"); testtable.Columns.Add("ProductName"); testtable.Rows.Add("1", "1"); testtable.Rows.Add("1", "1"); testta

  • asp.net 实现自定义Hashtable (.net)

    需要两个类 1．typeFiles.cs 复制代码 代码如下: using System; namespace Model { /// <summary> /// typeFiles 的摘要说明. /// </summary> public class typeFiles { private object _Fkey; private object _Fvalue1; private object _Fvalue2; public object Fkey { get { retur

  • asp.net 读取Excel数据到DataTable的代码

    复制代码 代码如下: /// <summary> /// 获取指定路径.指定工作簿名称的Excel数据:取第一个sheet的数据 /// </summary> /// <param name="FilePath">文件存储路径</param> /// <param name="WorkSheetName">工作簿名称</param> /// <returns>如果争取找到了数据会返回

  • Asp.net_Table控件の单元格纵向合并示例

    业务需要,动态生成表,同一列中数据相同的单元格需要合并. 解决方案,创建Table控件处理类,代码如下: 复制代码 代码如下: /// <summary>表格控件相关操作类 /// </summary> public static class aspTable { /// <summary>合并行 /// </summary> /// <remarks>版权信息:http://www.qqextra.com,http://t.qq.com/ls_

  • ASP.NET中DataTable与DataSet之间的转换示例

    DataSet包含了多个DataTable,以及DataTable之间的约束关系. 如果你的数据不需要做关系映射,直接用DataTable效率比较高.如果有需要1:N或N:M这样的关系查询,将DataSet中的相应DataTable全部填充,再使用关系查询数据. DataSet数据源你可以把它看成数据库,而DataTable就是数据库里的一个表 将DataTable添加到DataSet中: 在项目中遇到DataTable 无法直接转换成DataSet 时, 可以先new 可以先new DataS

  • Asp.net下使用Jquery Ajax传送和接收DataTable的代码

    服务器再把GridView反构造成DataTable, 再给DataTable增加一行之后,绑定到GridView,然后发回客户端... 能不能简单一点呢? 在使用Ajax数据请求数据,通常都是简单格式,比如String,信息量较少.当然也可以请求回XML,但是XML数据冗余多,取到客户端处理比json麻烦的多. 能不能简单一点呢? 上面这些问题,如果DataTable与JSON类型可以方便的相互转换,都可以迎刃而解了. 优点:1)避免不必要的回传: 2)精简异步请求数据的大小 : 3)解决数据

  • ASP.NET Table 表格控件的使用方法

    ASP.NET Table 表格控件的使用方法

    一个Table对象包含多个行TableRow,每一行又包含TableCell,TableCell中可以包含其他的HTML或者服务器控件作为Web服务器控件. 一.Table中的属性 Table对象: BackImageUrl 表格的背景图像的URL Caption 表格标题 CaptionAlign 标题文本对齐方式 CellPadding Table单元格内容和单元格边框之间的空间量(单位:像素) CellSpacing 相邻单元格之间的空间量 Rows Table控件中行的集合 TableR

  • asp.net Coolite TablePanel使用

    asp.net Coolite TablePanel使用

    其中用得最多的就是他的Tabs属性,用于定义子标签选项,可参考下图所示:                    其中content.html的代码如下代码片段,下图为运行效果截图: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <style type="text/css"> body{font-s

  • asp.net Coolite 学习交流

    Coolite Toolkit 简介 Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件. Coolite Toolkit是基于跨浏览器的ExtJS 库开发而来的,并且简化了开发步骤,并且包含有丰富的Ajax运用. Coolite Toolkit和ExtJS 都是开源的. 官方主页:http://coolite.com下载地址:http://coolite.com/downloadSamples: http://examples.coolite.com 而且我在cnb

  • asp.net coolite 删除时弹出确定按钮

    界面上如下: <ext:Button ID="btnDel" runat="server" Icon="Delete" Text="删除" > <Listeners ><Click Handler="CompanyUser.DoConfirm()"/></Listeners> </ext:Button> 还需要注意要加句这样的代码 <ext:

  • Coolite配置 管理软件开发历程之

    1.从官方网站下载Coolite Toolkit: http://www.coolite.com/download/ 2.修改Web.config文件 <?xml version="1.0"?><configuration> <configSections>    <section name="coolite" type="Coolite.Ext.Web.GlobalConfig" requirePerm

  • Coolite Cool Study 2 同时更新多个Tab

    Coolite Cool Study 2 同时更新多个Tab

       当时用Coolite做测试遇到两个问题: 1. 传递给Tab的Url参数会莫名其妙的被添加上其他字符(到Coolite论坛上问了一下估计是bug).正常情况下,google搜索url是这个样子:http://www.google.com/search?q=Hello   但因为Coolite在Tab的Url后面添加了某些字符,结果变成这样:http://www.google.com/search?q=Hellosfkjsdkfjskdf,  解决办法是把搜索Url设成这样形式:http:/

  • Coolite Cool Study 3 MVC + Coolite 的实现代码

    Coolite Cool Study 3 MVC + Coolite 的实现代码

    因为默认的 MVC 的样式文件里对于的 table 和 其他相关样式(h1-h6) 与Coolite有冲突,会导致GridPanel走样,大家记得先把那个table 和  h1-h6的样式清除掉才看到GridPanel的帅脸面 - 项目文件分布: 关于Coolite在MVC中的配置文件跟一般webform是一样的. 但在MVC的Global.asax中,需要在 RegisterRoutes 方法里加上这一句: routes.IgnoreRoute("{exclude}/{coolite}/coo

  • 详解ASP.NET Core 2.0 路由引擎之网址生成(译)

    详解ASP.NET Core 2.0 路由引擎之网址生成(译)

    问题 如何在ASP.NET Core 2.0中由路由引擎来生成网址? 答案 新建一个空项目,修改Startup.cs文件,添加MVC服务和中间件: public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopmen

  • 详解ASP.NET Core 2.0 视图引擎(译)

    详解ASP.NET Core 2.0 视图引擎(译)

    问题 如何在ASP.NET Core 2.0中使用Razor引擎来创建视图? 答案 新建一个空项目,修改Startup.cs,添加MVC服务和请求中间件: public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelo

  • 浅谈ASP.NET Core中间件实现分布式 Session

    浅谈ASP.NET Core中间件实现分布式 Session

    1.1. 中间件原理 1.1.1. 什么是中间件 中间件是段代码用于处理请求和响应,通常多个中间件链接起来形成管道,由每个中间件自己来决定是否要调用下一个中间件. 1.1.2. 中间件执行过程 举一个示例来演示中间件的执行过程(分别有三个中间件:日志记录.权限验证和路由):当请求进入应用程序时,执行执行日志记录的中间件,它记录请求属性并调用链中的下一个中间件权限验证,如果权限验证通过则将控制权传递给下一个中间件,不通过则设置401 HTTP代码并返回响应,响应传递给日志中间件进行返回. 1.1.

  • [译]ASP.NET Core 2.0 路由引擎详解

    [译]ASP.NET Core 2.0 路由引擎详解

    本文介绍了ASP.NET Core 2.0 路由引擎详解,分享给大家,具体如下: 问题 ASP.NET Core 2.0的路由引擎是如何工作的? 答案 创建一个空项目,为Startup类添加MVC服务和请求中间件: public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } public void Configure(IApplicationBuilder app, IHostingEnvir

随机推荐