在使用TabPanel的时候,需要根据Panel的不同状态给改Panel设置不同的图标,由此发现了其setIconClass方法无效。google了一下,还是在EXT官方论坛上发现了解决方案。共有2种,原理类似。
方法1:覆盖原有方法
/**
* fix for setIconClass.
* 在TabPanel中加入的Panel,其setIconClass功能无效,该补丁修复了该BUG
*/
Ext.override(Ext.TabPanel, {
// stash this away in TabPanel's prototype for the heck of it (oh...and
// convenient caching)
_initTabIconClassPatchFly : function(iconCls) {
var oldIconClass = this.iconCls;
var flyTabEl = Ext.fly(this.ownerCt.getTabEl(this));
var tabSpan = flyTabEl.child('span.x-tab-strip-text');
tabSpan.removeClass(oldIconClass);
this.iconCls = iconCls;
tabSpan.addClass(iconCls);
// new code to bump over title for icon
if (iconCls == "")
flyTabEl.removeClass('x-tab-with-icon');
else
flyTabEl.addClass('x-tab-with-icon');
},
// instead of copy/pasting, just grab the current implementation of
// TabPanel.initTab() for later
_initTabBeforeSetIconClassPatch : Ext.TabPanel.prototype.initTab,
// now override initTab()
initTab : function(item, index) {
// call the original implementation of initTab()
this._initTabBeforeSetIconClassPatch(item, index);
// and patch the Tab item's setIconClass method.
item.setIconClass = this._initTabIconClassPatchFly;
}
});
方法2:重写新方法
/**
* 增加了setIconCls方法,用以修复setIconClass无效的BUG
*/
Ext.override(Ext.Panel, {
setIconCls : function(i) {
Ext.fly(this.ownerCt.getTabEl(this)).child('.x-tab-strip-text')
.replaceClass(this.iconCls, i);
this.setIconClass(i);
}
});
分享到:
相关推荐
`tabpanel`是其中的一个重要组件,它继承自`container`,可以容纳多个`panel`,每个`panel`对应一个标签页。 要实现tabpanel动态加载,我们需要以下几个步骤: 1. **创建tabpanel** 首先,我们需要创建一个...
在版本4.2.1中,`TabPanel`提供了丰富的API和方法来控制其行为,如刷新当前标签页、关闭特定标签页等。 #### 刷新当前标签页 在ExtJS 4.2.1中,要实现刷新当前标签页的功能,可以采用以下方式: ```javascript ...
例如,可以使用 `tabpanel.getActiveTab()` 方法来获取当前活动页签,然后使用 `tab.setStyle()` 方法来设置该页签的样式。这种方法可以提供更好的灵活性和可扩展性。 设置tabpanel当前活动页签的样式是Extjs开发中...
通过以上两种方法——调整`autoDestroy`和`closeAction`属性——我们可以有效地解决Ext中`TabPanel`关闭后再打开不显示的问题。这些技巧不仅能够提升用户体验,还能够在复杂的业务场景下提供更加灵活的界面管理方案...
在ExtJS中,TabPanel是一个容器,可以包含多个Panel(或称之为卡片),每个Panel对应一个标签页。创建一个基本的TabPanel需要指定` xtype: 'tabpanel' `,并可以通过`items`属性来添加初始的面板。例如: ```...
4. **动态添加标签页**:在`itemclick`事件处理函数中,利用`TabPanel`的`add`方法添加新标签页,或者通过`setActiveTab`方法切换到已有标签页。 5. **更新标签页内容**:如果需要动态加载内容,可以在此时创建或...
var tabPanel = Ext.create('Ext.tab.Panel', { width: 800, height: 600, renderTo: Ext.getBody(), // 将组件渲染到页面body items: [{ title: '首页', html: '这是第一个标签页的内容' }, { title: '用户...
在这样的需求下,可以利用TabPanel的`beforeremove`事件和Panel的`beforeclose`事件。 `beforeremove`事件是在TabPanel尝试移除一个Panel之前触发的。这个事件提供了两个参数:`ct`(Container,即TabPanel本身)和...
`jerichotab`这个文件名可能是与一个叫做Jericho Tab Panel的库或者组件相关的,这可能是一个JavaScript库或者Java Swing组件,用于在Web或桌面应用中实现TabPanel效果。Jericho Tab Panel可能提供了丰富的自定义...
在“ExtJS扩展:垂直页签tabPanel”这个主题中,我们将探讨如何在ExtJS中实现一个创新的垂直布局的页签(tab)组件,这在很多情况下可以提供更好的用户界面体验。 首先,我们看到有两个JavaScript文件,TabPanel.js...
本实例探讨的是如何使用jQuery来实现一个功能丰富的TabPanel选卡结合右键菜单的交互功能,这对于创建高效的多页面视图应用是非常实用的。 首先,TabPanel是一种常见的UI组件,它允许用户在一个固定的区域中通过不同...
使用方法是这样:首先建立一个figure,并在其中加入一个Text控件,需要注意的是这个text控件所在的位置就是将来标签页所在的位置,然后将附件中的tabpanel2.6中的文件放到figure同目录下,然后在命令行输入 ...
4. **动画效果**:默认情况下,tabpanel在切换选项卡时会有平滑的过渡动画。如果希望关闭动画,可以在tabpanel配置项中设置`anim`为`false`。 5. **更新内容**:在激活选项卡时,可能需要根据新的选项卡内容更新...
接下来是CSS部分,它的主要任务是美化Tab Panel的外观,包括设置字体、颜色、边框、背景等样式,并确保选中状态下的标签与内容区域有明显的视觉差异。例如: ```css .tabs { list-style-type: none; margin: 0; ...
在IT行业中,`TabPanel`通常是指一种用户界面(UI)组件,常见于Web应用程序或桌面应用程序中。它允许在一个容器内展示多个面板,每个面板代表一个独立的页面或者视图,用户可以通过点击不同的标签在这些页面之间...
基于jquery的tabpanel,支持动态添加,支持滚动条,可内嵌iframe,支持关闭按钮,支持tab的背景图片配置, 这个是我在网上找到一个原始的版本,然后修改的,有详细注释,写了11个使用例子,基本涵盖了该组件的功能。...
接下来,`Ext.onReady`函数是ExtJS中的一个常用方法,它会在文档完全加载后执行,是初始化应用程序的常见入口点。在该函数内部,我们看到创建了几个Panel组件,包括`panel1`、`paneltab`,以及分别代表四个方向...
### ExtJS Panel 常用方法详解 #### 一、属性介绍 在开始探讨 ExtJS Panel 的常用方法之前,我们先来了解一下与 Panel 相关的一些基本属性。 1. **frame**: - 类型:布尔类型(true 或 false) - 描述:此属性...
在默认情况下,`TabPanel`会一次性加载所有的`Tab`内容,但这并不是最佳实践,特别是在处理大量数据或复杂组件时。为了优化性能,我们可以配置`TabPanel`以按需加载每个`Tab`的内容。 首先,我们需要设置`TabPanel`...
jQuery 提供了一系列方便的 API 和方法,如 `click()` 用于绑定点击事件,`show()` 和 `hide()` 用于控制元素的可见性,以及 `addClass()` 和 `removeClass()` 用于添加或移除类名,实现动态样式变化。 "TabPanel" ...