ExtJS TabPanel 标签操作
示例目标:
1.鼠标右键于标签上:关闭标签,关闭其他标签,关闭所有标签
2.双击关闭标签:参考
http://atian25.iteye.com/blog/413920
3.标签加入样式图片
4.添加新的TabPanel
5.隐藏TabPanel
主要代码:
Ext.onReady(function () {
Ext.override(Ext.TabPanel, {
initEvents: function () {
Ext.TabPanel.superclass.initEvents.call(this);
this.on('add', this.onAdd, this, {
target: this
});
this.on('remove', this.onRemove, this, {
target: this
});
this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this);
if (this.enableTabScroll) {
this.mon(this.strip, 'mousewheel', this.onWheel, this);
}
//ADD:monitor title dbclick
this.mon(this.strip, 'dblclick', this.onTitleDblClick, this);
}
});
var tabs = new Ext.TabPanel({
id: 'tabs',
renderTo: document.body,
width: 500,
resizeTabs: true,
enableTabScroll: true,
height: 400,
frame: true,
activeTab: 0,
frame: false,
enableTabScroll: true,
defaults: {
autoHeight: true
},
items: [{
contentEl: 'script',
title: 'Short Text',
html: '内容区',
enableTabScroll: true,
iconCls: 'tabIcon',
tabWidth: 200,
width: 220,
closable: true
},
{
contentEl: 'markup',
title: 'Long Text',
html: 'tab2',
enableTabScroll: true,
iconCls: 'tabIcon',
tabWidth: 200,
width: 220,
closable: true
},
{
title: 'tab3',
html: 'tab2',
enableTabScroll: true,
iconCls: 'tabIcon',
tabWidth: 200,
width: 220,
closable: true
}],
plugins: new Ext.ux.TabCloseMenu(),
//ADD: handler
onTitleDblClick: function (e, target, o) {
var t = this.findTargets(e);
if (t.item.fireEvent('beforeclose', t.item) !== false) {
t.item.fireEvent('close', t.item);
this.remove(t.item);
}
},
tbar: [{
text: '隐藏所有',
handler: function () {
Ext.getCmp('tabs').hide();
}
},
'|', {
text: '添加新的panel',
handler: function () {
Ext.getCmp('tabs').add(new Ext.TabPanel({
title: 'newTabPanel',
html: 'newTabPanel',
enableTabScroll: true,
iconCls: 'tabIcon',
tabWidth: 200,
width: 220,
closable: true
}) //Ext.TabPanel over
);
}
}]
});
});
分享到:
相关推荐
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
### ExtJS 4.2.1 TabPanel 刷新与关闭标签...综上所述,ExtJS 4.2.1提供了丰富的API来处理`TabPanel`的各种操作,包括刷新和关闭标签页等功能。开发者可以根据实际需求灵活运用这些API,实现高效且功能丰富的用户界面。
Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序(RIA)。其中,tabpanel是Extjs中一个常用的控件,用于显示多个面板。设置tabpanel当前活动页签的样式是...
在ExtJS中,`tabPanel` 是一个非常重要的组件,它允许你在一个容器内创建多个标签页,每个标签页可以承载不同的内容,提供了类似桌面应用的用户体验。在实际开发中,`tabPanel` 经常被用来组织和展示复杂的信息。 `...
在ExtJS中,TabPanel是常用的组件,用于展示多个面板(Panel)并提供标签页切换功能。当用户尝试关闭TabPanel中的某个Panel时,我们可能需要执行一些验证或确认操作,例如弹出对话框询问用户是否真的要关闭当前页面...
在本文中,我们将深入探讨ExtJS中的`Ext.TabPanel`组件,它是创建多标签界面的核心元素。`Ext.TabPanel`允许开发者在单个容器中组织多个面板或视图,每个面板都有自己的标题,并且可以通过标签页进行切换。让我们...
在EXTJS 4.x框架中,`tabpanel`是用于创建多标签界面的组件,它可以方便地组织和切换多个视图。动态加载panel和HTML到tabpanel是提高应用性能和用户体验的有效方式,因为它允许按需加载内容,减少初始页面加载时间。...
本篇文章将深入探讨EXTJS中tabpanel的激活操作及其注意事项。 首先,我们来看tabpanel的激活操作。在EXTJS中,当用户点击一个选项卡时,对应的面板会被自动激活,显示其内容。但有时我们需要通过编程方式来激活特定...
ExtJS提供了丰富的事件系统,你可以监听TabPanel的事件来执行特定的操作,如`tabchange`事件,当用户切换标签时触发: ```javascript tabPanel.on('tabchange', function(tabPanel, newTab) { console.log('Tab ...
在EXT JS这个强大的JavaScript库中,`TabPanel`是一个核心组件,用于实现多标签页界面。本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载,这在构建可扩展且高效的Web应用时非常关键。通过动态加载,...
EXTJS扩展标记是一种技术,它允许开发者在JSP页面中使用类似于HTML标签的方式来操作EXTJS组件,极大地简化了EXTJS应用的开发过程。EXTJS是一个强大的JavaScript库,用于构建富客户端Web应用程序,提供了丰富的用户...
EXTJS4.0.7的TabPanel组件支持这一特性,每个标签页可以包含不同的组件或视图,提供灵活的工作空间管理。开发者可以通过编程或用户交互来添加、删除和切换标签页,提高后台管理的效率和用户体验。 EXTJS4.0.7后台...
"Ext的Tab标签封装"指的是使用ExtJS库创建的TabPanel组件,它允许用户在一个区域内通过点击不同的标签来展示不同的内容面板。 在描述中提到的"兼容Firefox 和 IE浏览器",这意味着该封装方法考虑到了跨浏览器的兼容...
`TabPanel`的实现方式多种多样,常见的有HTML/CSS/JavaScript、Java Swing、.NET WinForms、WPF以及各种Web框架如ASP.NET、ExtJS、Vue.js等。在给定的标题"TabPanel加载页面"中,我们可以理解为讨论的是如何在`...
TabPanel是EXTJS中一个非常重要的组件,它允许在一个容器内创建多个可切换的面板,每个面板就像一个标签页,用户可以通过点击标签在不同的内容之间切换。 【描述】虽然描述为空,但我们可以根据标签和博文链接推测...
在Ext框架中,`TabPanel`是一个非常重要的组件,用于实现页面中的多标签页功能。然而,在实际应用过程中可能会遇到一个常见问题:当某个标签页被关闭后,如果尝试重新打开该标签页,则可能会出现无法正常显示的情况...