ExtJS4学习笔记(十五)---选项卡(tabs)

最新推荐文章于 2019-10-29 15:17:28 发布
最新推荐文章于 2019-10-29 15:17:28 发布
阅读量2k 收藏 1
点赞数
分类专栏： ExtJs4.0 ExtJs JS 文章标签： extjs tabs function button html api
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoqiliang527/article/details/6733310
版权
ExtJs 同时被 3 个专栏收录
61 篇文章 0 订阅
订阅专栏
JS
50 篇文章 0 订阅
订阅专栏
ExtJs4.0
22 篇文章 1 订阅
订阅专栏

tab选项卡，是Extjs中常用的组件，tab一般依附于tabpanel，很多时候我也认为tab就是tabpanel,但在官方api中，确实有Ext.tab.Panel和Ext.tab.Tab之分，具体属性、事件、方法，请参考API，tab选项卡可以单独渲染，使用方法是：xtype: 'tab'，本文介绍tab的基本用法。

HTML代码：除了加载基本库以外，定义了一些CSS样式，这些CSS基本没用，就是我看着所有组件靠着BODY太不舒服了。。

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  6. <script type="text/javascript" src="../../bootstrap.js"></script>
  7. <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
  8. <script type="text/javascript" src="tabs1.js"></script>
  9. <title>MHZG.NET--Tabs</title>
  10. <style>
  11.     .main{ margin:50px auto;}
  12.     #add{ padding-left:10px;}
  13. </style>
  14. </head>

  16. <body>
  17. <div class="main">
  18. <div id="add"></div>
  19. <div id="tab"></div>
  20. </div>
  21. </body>
  22. </html>

tabs1.js：

 
  1. Ext.require('Ext.tab.*');
  2. Ext.onReady(function(){
  3.     var currentItem;
  4.     var tabs = Ext.createWidget('tabpanel', {
  5.         renderTo: 'tab',
  6.         resizeTabs: true,
  7.         enableTabScroll: true,
  8.         margin:'10',
  9.         width: 600,
  10.         height: 250,
  11.         defaults: {
  12.             autoScroll:true,
  13.             bodyPadding: 10
  14.         },
  15.         items: [{
  16.             title: '选项卡',
  17.             html: '选项卡内容',
  18.             closable: true
  19.         }]
  20.         
  21.     });
  22.     
  23.     var index = 0;
  24.     
  25.     function addTab (closable) {
  26.         ++index;
  27.         tabs.add({
  28.             title: '新选项卡- ' + index,
  29.             html: '新选项卡内容 ' + index + '<br/><br/>',
  30.             closable: !!closable
  31.         }).show();
  32.     }

  34.     Ext.createWidget('button', {
  35.         renderTo: 'add',
  36.         text: '创建可关闭选项卡',
  37.         handler: function () {
  38.             addTab(true);
  39.         }
  40.     });

  42.     Ext.createWidget('button', {
  43.         renderTo: 'add',
  44.         text: '创建不可关闭选项卡',
  45.         handler: function () {
  46.             addTab(false);
  47.         },
  48.         style: 'margin-left: 8px;'
  49.     });
  50. });

zhaoqiliang527
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ExtJs4 笔记（10） Ext.tab.Panel 选项卡
weixin_30851409的博客
12-21 176
《回到系列目录 本篇讲解选项卡控件。 一、基本选项卡 首先我们来定义一个基本的选项卡控件，其中每个Tab各有不同，Tab的正文内容可以有三种方式获取： 1.基本方式:通过定义html和items的方式。 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。 3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。 另外，...
ExtJS4学习笔记(十二)---选项卡(tabs)
随风的专栏
01-17 547
tab选项卡，是Extjs中常用的组件，tab一般依附于tabpanel，很多时候我也认为tab就是tabpanel,但在官方api中，确实有Ext.tab.Panel和Ext.tab.Tab之分，具体属性、事件、方法，请参考API，tab选项卡可以单独渲染，使用方法是：xtype: 'tab'，本文介绍tab的基本用法。 HTML代码：除了加载基本库以外，定义了一些CSS样式，这些CSS基本没
EXTJs工具条 菜单 Tab标签
sdfsdfytre的博客
11-18 292
EXTJs工具条 菜单 Tab标签
选项卡展示
kpstyle
06-11 216
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
Extjs复习笔记（十五）-- JsonReader
07-29
在“Extjs复习笔记（十五）-- JsonReader”这篇博文中，博主探讨了ExtJS中的JsonReader，这是数据绑定和JSON数据解析的关键部分。 JsonReader是ExtJS数据包（Ext.data）的一部分，用于从服务器获取JSON格式的数据，...
extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip
10-30
在"extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip"这个压缩包中，包含了一个基于ExtJS 4.1.0 MVC模式构建的复杂仪表盘示例。这个示例展示了如何利用ExtJS的MVC设计模式来组织和管理代码，以便创建功能...
extjs4-ssi
08-21
ExtJS 4 SSI 是一个基于 ExtJS 4 框架开发的系统，它集成了用户管理、角色管理和菜单管理等功能，适用于快速构建企业级Web应用。在深入讲解这个系统之前，首先需要理解 ExtJS 和 SSI 这两个概念。 ExtJS 是一个流行...
Extjs复习笔记（十一）--换肤
07-29
在EXTJS框架中，换肤是一项重要的功能，它允许开发者根据用户需求或品牌风格改变应用程序的外观和感觉。本文将深入探讨EXTJS的换肤机制，以及如何利用提供的主题CSS文件实现这一特性。 EXTJS是一个强大的JavaScript...
extjs4-ssi例子
08-21
通过这个例子，开发者不仅可以学习到ExtJS 4的基础知识，还能深入理解如何在实际项目中整合服务器端技术，如SSI，以提高应用程序的性能和用户体验。同时，这个例子也为构建企业级的后台管理系统提供了一个参考模板。
判断extjs内的tabs的状态。
weixin_30517001的博客
08-28 78
判断windowif(!win.rendered){alert("noreader")}elseif(win.hidden){alert("hidden")}else{alert("show")} 转载于:https://www.cnblogs.com/biandande/archive/2011/08/28/2156191.html...
EXT JS 4.3 在线学习
weixin_30480075的博客
03-25 379
官网地址：http://docs.sencha.com/extjs/4.1.3/ 相关示例：http://docs.sencha.com/extjs/4.1.3/#!/example Examples Combination Examples Kitchen Sink (Webkit only) Showcase of Ext JS ...
Yahoo javascript 开源界面库YUI 和EXT
gdfjhc的博客
11-15 493
Yahoo javascript 开源界面库YUI 和EXT
easyUI快速入门第四讲——easyUI中的tabs（选项卡）组件
李阿昀的博客
10-29 2443
tabs（选项卡）组件的概述 选项卡会显示一批面板，但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 tabs（选项卡）组件的使用 首先，在所在项目的WebContent目录下新建一个04-tabs目录，并在该目录下新建一个04-tabs.html页面。 <!DOCTYPE html> <html> <h...
EasyUI—点击tab内容中的链接，在父级tab上新增一个tab
u011450110的专栏
04-22 6588
先来说下添加tabs的两种方式 第一种以href链接的方式： function addTab(title, url){             if ($('#tt').tabs('exists', title)){                 $('#tt').tabs('select', title);             } else {                 
ExtJs4.2学习--Ext.tab.Panel 选项卡
热门推荐
小硒---代码无疆
01-01 1万+
1、基本标签的容器中。 TabPanels可以使用完全一样的标准Ext.panel.Panel布局的目的，但也有包含正在使用CardLayout布局管理器管理的子组件（项目）的特殊支持，并显示为单独的标签。先看看看官方的文档： 先看看一个简单的实例： var tabs = Ext.create('Ext.tab.Panel', { width: 400,
ExtJS4学习笔记：创建Window组件
"这是一份关于ExtJS4学习的笔记...这份学习笔记强调了ExtJS4中创建组件的新方法和动态加载的重要性，以及在创建窗口时应注意的细节。这对于正在学习ExtJS4或者想要优化其应用性能的开发者来说是非常有价值的参考资料。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值