`
littcai
  • 浏览: 248041 次
  • 性别: Icon_minigender_1
  • 来自: 无锡
社区版块
存档分类
最新评论

TabPanel下Panel的setIconClass方法无效

阅读更多

     在使用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);
	}
});

 

3
1
分享到:
评论
1 楼 konnysnow 2010-02-04  
高手!
字数怎么不够啊

相关推荐

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

    `tabpanel`是其中的一个重要组件,它继承自`container`,可以容纳多个`panel`,每个`panel`对应一个标签页。 要实现tabpanel动态加载,我们需要以下几个步骤: 1. **创建tabpanel** 首先,我们需要创建一个...

    extjs4.2.1 tabPanel刷新及关闭标签

    在版本4.2.1中,`TabPanel`提供了丰富的API和方法来控制其行为,如刷新当前标签页、关闭特定标签页等。 #### 刷新当前标签页 在ExtJS 4.2.1中,要实现刷新当前标签页的功能,可以采用以下方式: ```javascript ...

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

    例如,可以使用 `tabpanel.getActiveTab()` 方法来获取当前活动页签,然后使用 `tab.setStyle()` 方法来设置该页签的样式。这种方法可以提供更好的灵活性和可扩展性。 设置tabpanel当前活动页签的样式是Extjs开发中...

    Ext中的tabpanel关闭后再打开不显示的问题

    通过以上两种方法——调整`autoDestroy`和`closeAction`属性——我们可以有效地解决Ext中`TabPanel`关闭后再打开不显示的问题。这些技巧不仅能够提升用户体验,还能够在复杂的业务场景下提供更加灵活的界面管理方案...

    ExtJS TabPanel 标签操作

    在ExtJS中,TabPanel是一个容器,可以包含多个Panel(或称之为卡片),每个Panel对应一个标签页。创建一个基本的TabPanel需要指定` xtype: 'tabpanel' `,并可以通过`items`属性来添加初始的面板。例如: ```...

    treepanel 和 tabpanel 完整

    4. **动态添加标签页**:在`itemclick`事件处理函数中,利用`TabPanel`的`add`方法添加新标签页,或者通过`setActiveTab`方法切换到已有标签页。 5. **更新标签页内容**:如果需要动态加载内容,可以在此时创建或...

    ExtJS tabPanel实例

    var tabPanel = Ext.create('Ext.tab.Panel', { width: 800, height: 600, renderTo: Ext.getBody(), // 将组件渲染到页面body items: [{ title: '首页', html: '这是第一个标签页的内容' }, { title: '用户...

    ExtJS TabPanel beforeremove beforeclose使用说明

    在这样的需求下,可以利用TabPanel的`beforeremove`事件和Panel的`beforeclose`事件。 `beforeremove`事件是在TabPanel尝试移除一个Panel之前触发的。这个事件提供了两个参数:`ct`(Container,即TabPanel本身)和...

    TabPanel效果,比较有用,收藏先。

    `jerichotab`这个文件名可能是与一个叫做Jericho Tab Panel的库或者组件相关的,这可能是一个JavaScript库或者Java Swing组件,用于在Web或桌面应用中实现TabPanel效果。Jericho Tab Panel可能提供了丰富的自定义...

    ExtJS扩展:垂直页签tabPanel

    在“ExtJS扩展:垂直页签tabPanel”这个主题中,我们将探讨如何在ExtJS中实现一个创新的垂直布局的页签(tab)组件,这在很多情况下可以提供更好的用户界面体验。 首先,我们看到有两个JavaScript文件,TabPanel.js...

    TabPanel选卡结合右键菜单实例

    本实例探讨的是如何使用jQuery来实现一个功能丰富的TabPanel选卡结合右键菜单的交互功能,这对于创建高效的多页面视图应用是非常实用的。 首先,TabPanel是一种常见的UI组件,它允许用户在一个固定的区域中通过不同...

    如何在MATLAB中做出标签页的效果-tabpanel2.6.zip

    使用方法是这样:首先建立一个figure,并在其中加入一个Text控件,需要注意的是这个text控件所在的位置就是将来标签页所在的位置,然后将附件中的tabpanel2.6中的文件放到figure同目录下,然后在命令行输入 ...

    ext的tabpanel的激活与注意事项

    4. **动画效果**:默认情况下,tabpanel在切换选项卡时会有平滑的过渡动画。如果希望关闭动画,可以在tabpanel配置项中设置`anim`为`false`。 5. **更新内容**:在激活选项卡时,可能需要根据新的选项卡内容更新...

    javascritp+css+tabpanel的实现

    接下来是CSS部分,它的主要任务是美化Tab Panel的外观,包括设置字体、颜色、边框、背景等样式,并确保选中状态下的标签与内容区域有明显的视觉差异。例如: ```css .tabs { list-style-type: none; margin: 0; ...

    TabPanel 加载页面

    在IT行业中,`TabPanel`通常是指一种用户界面(UI)组件,常见于Web应用程序或桌面应用程序中。它允许在一个容器内展示多个面板,每个面板代表一个独立的页面或者视图,用户可以通过点击不同的标签在这些页面之间...

    基于jquery的tabpanel

    基于jquery的tabpanel,支持动态添加,支持滚动条,可内嵌iframe,支持关闭按钮,支持tab的背景图片配置, 这个是我在网上找到一个原始的版本,然后修改的,有详细注释,写了11个使用例子,基本涵盖了该组件的功能。...

    TabPanel布局

    接下来,`Ext.onReady`函数是ExtJS中的一个常用方法,它会在文档完全加载后执行,是初始化应用程序的常见入口点。在该函数内部,我们看到创建了几个Panel组件,包括`panel1`、`paneltab`,以及分别代表四个方向...

    学习ExtJS Panel常用方法

    ### ExtJS Panel 常用方法详解 #### 一、属性介绍 在开始探讨 ExtJS Panel 的常用方法之前,我们先来了解一下与 Panel 相关的一些基本属性。 1. **frame**: - 类型:布尔类型(true 或 false) - 描述:此属性...

    Ext中TabPanel的动态页面加载

    在默认情况下,`TabPanel`会一次性加载所有的`Tab`内容,但这并不是最佳实践,特别是在处理大量数据或复杂组件时。为了优化性能,我们可以配置`TabPanel`以按需加载每个`Tab`的内容。 首先,我们需要设置`TabPanel`...

    TabPanel 选项卡

    jQuery 提供了一系列方便的 API 和方法,如 `click()` 用于绑定点击事件,`show()` 和 `hide()` 用于控制元素的可见性,以及 `addClass()` 和 `removeClass()` 用于添加或移除类名,实现动态样式变化。 "TabPanel" ...

Global site tag (gtag.js) - Google Analytics