Ext.js入门：TabPanel组件（八）
2024-05-16 06:10:07
一：TabPanel组件简介
二：简单代码示例
三：使用iframe作为tab的标签页内容
四：动态添加tabpanel的标签页
五：为tabpanel标签页添加右键菜单
方式一：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title><link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script><script src="Ext/ext-all.js" type="text/javascript"></script><script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function() {var mytable = new Ext.TabPanel({renderTo: Ext.getBody(),width: 200,activeTab: 0,//激活的页数frame: true, //出现渲染的边框items: [{title:"tab1",html:"tab1 content"},{title:"tab2",html:"tab2 content"}]});})</script>
</head>
<body></body>
</html>
方式二：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script><script src="Ext/ext-all.js" type="text/javascript"></script><script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function() {var tabs = new Ext.TabPanel({renderTo: 'my-tabs',activeTab: 0,width:200,items: [{ contentEl: 'tab1', title: 'aaa' },{ contentEl: 'tab2', title: 'bbb' }]});});</script>
</head>
<body>
<div id="my-tabs">
<div id="tab1" class="x-hide-display">A simple tab</div>
<div id="tab2" class="x-hide-display">Another one</div>
</div>
效果：
几个相关参数
1.tabPosition:“bottom”//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)
2.tabTip:“提示”//必须先调用Ext.QuickTips.init();才有效果
1.tabPosition:“bottom”//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)
2.tabTip:“提示”//必须先调用Ext.QuickTips.init();才有效果
3、经常我们有这么个情况,一个选项卡加载一个页面,这里我提供一种不是很好但是很稳定的简单方法(已经在项目中验证没有出现问题).
就是:使用iframe作为tab的标签页内容.
就是:使用iframe作为tab的标签页内容.
代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script><script src="Ext/ext-all.js" type="text/javascript"></script><script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function() {var testTab = new Ext.TabPanel({renderTo: Ext.getBody(),width: "100%",height:500,activeTab: 0,frame: true,items: [{contentEl:"mainFrame",tabTip:"fengjian",title:"加载页面的标签页",closable: true}]});});</script>
</head>
<body style="margin:10px;"><div><a href="javascript:void(0)" οnclick="parent.frames['mainFrame'].location='http://www.cnblogs.com'">换成博客园</a><iframe id="mainFrame" name="mainFrame" src="http://www.baidu.com" frameborder="0" height="500px" width="100%" ></iframe></div>
</body></html>
点击添加新的页面：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title><link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script><script src="Ext/ext-all.js" type="text/javascript"></script><script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function() {var index = 0;var tabsDemo = new Ext.TabPanel({renderTo: Ext.getBody(),activeTab: 0,height: 700,frame: true,items: [{title: "autoLoad为html简单页面演示",autoLoad: { url: "Tab1.aspx", scripts: true }}]});Ext.get("AddNewTab").on("click", function() {tabsDemo.add({title: "newtab" + index,id: "newtab" + index,html: "new tab" + index,closable: true});tabsDemo.setActiveTab("newtab" + index);index++;//alert(index);});});</script>
</head>
<body><a href="javascript:void(0)" id="AddNewTab">添加新页面</a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <div> aaaaaaaaaaaaaa </div> </form></body></html>
为tabpanel标签页添加右键菜单
//几个参数说明
1.enableTabScroll:true//前面已经说过了
2. listeners:{“contextmenu”:function(参数1,参数2,参数3){.}}
//右键菜单事件，三个参数分别为当前tabpanel，当前标签页panel，事件对象e
每个标签页都有激活和去激活事件
activate和deactivate，他们的执行函数有个参数，就是当前标签页。
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title><link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script><script src="Ext/ext-all.js" type="text/javascript"></script><script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function() {var index = 0;function addTab() {tabsDemo.add({title: "tab" + index,id: "newtab" + index,html: "new tab " + index,closable: true});tabsDemo.setActiveTab("newtab" + index);index++;}var tabsDemo = new Ext.TabPanel({renderTo: Ext.getBody(),activeTab: 0,height: 200,enableTabScroll: true,frame: true,//透明度items: [{ //监听右键菜单 传递的参数：1.TabPanel 2.每一项的值 3.事件title: "首页",html: "first Page"
}],listeners: {"contextmenu": function(tdemo, myitem, e) {menu = new Ext.menu.Menu([{text: "关闭当前页",handler: function() {tdemo.remove(myitem);}},{text: "关闭其他所有页",handler: function() {tdemo.items.each(function(item) {if (item.closable && item != myitem) {tdemo.remove(item);}});}},{text: "新建标签页",handler: addTab}]);menu.showAt(e.getPoint());}}});});</script>
</head>
<body><a href="javascript:void(0)" id="AddNewTab">添加新页面</a>
</body>
</html>
效果图：
转载于:https://www.cnblogs.com/sunliyuan/p/5843541.html
Ext.js入门：TabPanel组件（八）相关推荐
- Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤 创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例 比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
- [Ext JS 4] Grid 组件
基本网格面板 Model and Store Grid Panel 仅仅用来展现数据,数据的获取和保存交给使用Proxy的 Store来处理. 首先定义一个 "User"的模型 E ...
- 第2章[2.5] Ext JS组件、容器与布局
组件 (Components) 基于Ext JS的应用的UI由组件(Component)组成.这和绝大部分界面开发语言的概念是类似的. Ext JS使用的是面向对象的概念, 有组件类与组件实例的概念, ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南--类的定义.初始化.继承 Ember.js 入门指南--类的扩展(reopen) Ember.js 入门指南--计算属性(compute properti ...
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建项目
打开VS2010,在主菜单选择文件,新建,项目,在如图1所示的弹出窗口中已安装的模板下选择C#的Web模板,然后选择"ASP.NET MVC 3 Web应用程序",将项目名称修改为 ...
- 【翻译】Ext JS 6.6.0的新东西
原文:<What's New in Ext JS 6.6.0> 简介 Sencha Ext JS 6.6已经支持NPM包和开放工具.Ext JS 6.6现在可以通过NPM包让开发人员使用已 ...
- 3.2.8 Ext JS之字段集合(fieldset)
Field Set,字段集合, 就是将一组字段放在一个容器中, Ext JS提供的组件类是 :Ext.form.FieldSet ,xtype 是fieldset. fieldset的显示效果如下: ...
- js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
- Ext JS 6学习文档-第3章-基础组件
Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...
- 谈谈Ext JS的组件——布局的使用方法续二
绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为 ...
最新文章
- python22期自动化-Day2
- 从零开始的webpack生活-0x003：html模板生成
- BufferedReader 中的 readLine()
- SQL ABAP ST05 hint
- node--更新数据库问题
- java程序设计简明教程张晓龙_Java网络编程简明教程
- 剑指offer 面试题61. 扑克牌中的顺子
- Atitit spring5 集成 mybatis 注解班
- abrt-hook-ccpp: Saved core dump of pid 12224导致dn挂掉问题
- 使用MyBatis后，DAO层的方法还能重载吗？
- B站飞机大战源码、素材
- 【CSS标签的嵌套规则】
- cocos android 热更新,Cocos creator 大厅子游戏和热更新
- dnf 跨服 服务器 位置,dnf跨区怎么跨_dnf国服跨区表_快吧游戏
- bscroll 滚动位置_BScroll左右联动导航
- 3.4 Go语言从入门到精通：包管理工具之Go module
- 【工程测试与训练】使用 DDRNet 测试、训练cityscapes数据集、训练自己的数据集
- 在未来的多云世界中，选择云服务提供商，需要考虑什么？
- 读庄子－万物齐一和自然无为
- Android 动画系列之 -- 补间动画