TabPanel下Panel的setIconClass方法无效

修复ExtJS TabPanel图标的BUG

最新推荐文章于 2021-02-25 01:26:44 发布

最新推荐文章于 2021-02-25 01:26:44 发布 · 192 阅读

文章标签：

#EXT #prototype #Google

EXTJS 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了在ExtJS框架中修复TabPanel组件图标显示问题的方法。通过两种不同的技术手段，包括覆盖原有方法和重写新方法，解决了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);
	}
});