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