`

extjs4 Ext.tab.Panel

    博客分类:
  • ext
 
阅读更多
var tabs = Ext.create("Ext.tab.Panel",{
				width:300,
				height:200,
				activeTab:0,
				items:[{
					title:"Home",
					itemId:"home",
					html:"Home"
				},{
					title:"User",
					itemId:"user",
					html:"user",
					//hidden:true
				},{
					title:"Tickes",
					itemId:"tickes",
					html:"tickes"
				}],
				renderTo:Ext.getBody()
			});
			
			setTimeout(function(){
				tabs.child("#home").tab.hide();
				var user = tabs.child("#user");
				user.tab.show();
				tabs.setActiveTab(user);
			},1000);

extjs4 和 extjs3.x 在创建对象的时候有个明显的区别,那就是:extjs4 用Ext.create()来生成对象。

tabpanel 的常用属性:
tabPosition: 设置tab的位置,
下面来学习item常用的属性:
title: 标题
itemId: item的 id
html:页面显示的内容,可以是普通字符和html代码
hidden:设置item是否隐藏

tabpanel 的方法
child():获取tabs的子节点,参数为itemId。
var user = tabs.child("#user");
user.tab.show();
tabs.setActiveTab(user);

如上:可以通过id=“user”来获取tabs的子节点,在通过子节点获取tab。
并且可以通过 tabs.items.items[0]这样的语句来获得tab。

close():关闭一个tab,如下面代码,关闭第一个tab
tabs.items.items[0].close();

add():增加一个tab
remove():删除一个tab
分享到:
评论

相关推荐

    extjs4.x tabpanel 动态加载panel和html例子

    var panel = Ext.create('Ext.panel.Panel', config); this.add(panel).show(); // 添加并显示面板 this.setActiveTab(panel); // 设置当前活动的tab } ``` 3. **创建并添加panel** 当用户触发某个事件(如...

    extjs tab panel

    ExtJS Tab Panel是Ext JS库中的一个核心组件,它用于创建具有多个标签页的应用界面,类似于浏览器中的标签页。在Web应用中,Tab Panel经常被用来组织和展示大量的信息,让用户能够在一个页面上轻松切换不同的内容...

    Extjs4.2 设置tabpanel当前活动页签的样式

    其中, `.x-tab-active` 是Extjs中当前活动页签的CSS类名, `.x-tab-wrap` 是标签页签的容器, `.x-tab-button` 是标签页签的按钮, `.x-tab-inner` 是标签页签的内部容器。 在上面的代码中,我们使用了CSS选择器来...

    extjs4.2.1 tabPanel刷新及关闭标签

    item.loader = new Ext.data.TreeLoader({ url: 'your-data-url', // 数据URL autoLoad: true // 自动加载数据 }); item.loader.load(item.store.getRootNode()); } } ``` 上述代码中的`this.tabPanel....

    Extjs6.x插件,双击关闭选项卡(js源码)

    在EXTJS 6.x 中,`Ext.Tab.Panel` 是一个常用的组件,用于创建带有选项卡的布局,每个选项卡代表一个独立的视图或窗口。 在EXTJS 4.x 中,存在一种常见的用户交互模式,即双击选项卡来关闭该选项卡。然而,随着...

    extJs3升级extjs4方案

    在 ExtJS4 中,API 也发生了很大的变化,包括 tree、tab panel、grid、window、form、chart、data stores、border layout 等等。这些变化使得大型应用程序迁移变得非常困难。 在 ExtJS3 中,我们可以使用 Ext....

    ExtJs4_笔记.docx

    - **Ext.tab.Panel**:详细讲解了选项卡的创建和操作。 - **Ext.ListView**和**Ext.view.View**:数据视图的实现。 - **Ext.toolbar.Toolbar**、**Ext.toolbar.Paging**和**Ext.ux.statusbar.StatusBar**:工具栏、...

    Ext组件描述,各个组件含义

    **2.11 Tab Panel (Ext.TabPanel)** - **xtype**: `tabpanel` - **功能描述**:Tab Panel 是一个包含多个选项卡的容器。 - **主要用途**:用于展示多个相关的数据集或功能模块,每个选项卡代表一个不同的页面。 **...

    ExtJSWeb应用程序开发指南(第2版)

    5.1.2 Ext.panel.Panel的主要功能 5.1.3 使用Ext.panel.Panel 5.2 标准布局类 5.2.1 Auto自动布局 5.2.2 Fit自适应布局 5.2.3 Accordion折叠布局 5.2.4 Card卡片式布局 5.2.5 Anchor锚点布局 5.2.6 Absolute...

    ExtJS组件介绍.pdf

    面板(Panel)是ExtJS框架中最基础也是最重要的组件之一,几乎所有复杂控件都是基于Panel构建的。它不仅提供了丰富的功能和样式,还是其他组件组合与展示的核心容器。面板通常由以下几个部分构成: - **顶部工具栏...

    Extjs4 tab 基本选项卡及增删插入操作

    在这个“Extjs4 tab 基本选项卡及增删插入操作”的主题中,我们将深入探讨如何使用ExtJS 4来管理TabPanel的选项卡,包括创建、删除和插入操作。 首先,让我们了解TabPanel的基本配置和选项: 1. **创建TabPanel** ...

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版)

    <ext:Panel runat="server" Title="Tab 1" /> 55. Removed <ext:Tab> Control. Now any Ext.Net.PanelBase Component can be added to the TabPanel's .Items Collection. 56. XTemplate: renamed Text to ...

    Ext Js权威指南(.zip.001

    9.3.3 面板标题栏构件:ext.panel.header与ext.panel.tool / 438 9.3.4 记录和恢复面板属性:ext.util.memento / 439 9.3.5 面板常用的配置项、方法和事件 / 439 9.4 布局 / 441 9.4.1 布局概述 / 441 9.4.2 ...

    ExtJS-3.4.0系列目录

    - **Ext.tab.Panel**:页签面板,用于展示多个页面内容,每个页面作为一个单独的Tab。 6. **Tree 组件** - **Ext.tree.Panel**:用于展示树形结构的数据,包含配置项和方法,如节点的添加、删除和操作。 7. **...

    Extjs的Tree和Tab使用json做tree数据交互

    在ExtJS中,Tree和Tab是两种常用的组件,分别用于展示层次结构的数据(如目录结构)和创建多页面布局。本篇文章将详细探讨如何利用JSON数据来实现这两者的交互。 首先,让我们了解一下`Tree`组件。在ExtJS中,Tree...

    Extjs4.2 根据不同的数值设置tabpanel行的背景颜色

    var tabPanel = Ext.create('Ext.tab.Panel', { width: 600, height: 300, items: [ { title: 'Value Table', layout: 'fit', items: Ext.create('MyApp.view.MyGrid') } ] }).render(Ext.getBody()); })...

    ExtJS效果Tabs形式

    创建TabPanel的基本步骤包括创建一个新的Ext.container.TabPanel实例,然后添加多个Ext.panel.Panel子组件,每个子组件代表一个标签页。例如: ```javascript var tabPanel = Ext.create('Ext.tab.Panel', { ...

    extJs+2.1学习笔记.pdf

    15. **extJs 2.0 学习笔记(Ext.Panel终结篇)** Panel是构建UI的基本组件,涵盖了布局、标题、工具栏等多种功能。掌握Panel的使用和配置,能创建复杂而灵活的界面。 16. **extJs 2.0 学习笔记(事件注册总结篇)*...

    老师整理的extjs学习笔记

    ExtJS 中的所有组件都继承自 `Ext.Component` 类,而 `Ext.Component` 又继承自 `Ext.util.Observable` 类。这意味着所有的组件都具有事件管理的能力。 **3.2 ExtJS 常用组件的继承关系及其管理** ExtJS 提供了...

Global site tag (gtag.js) - Google Analytics