Reproduce:
go to: http://extjs.com/deploy/dev/examples...t/complex.html
observe icons for east, west, south and accordion panels.
paste:
Code:
var icon = 'nav';
Ext.getCmp('west-panel').setIconClass(icon); // East panel title bar
Ext.getCmp('ext-comp-1017').setIconClass(icon); // East panel title bar
Ext.getCmp('ext-comp-1018').setIconClass(icon); // South panel title bar
Ext.getCmp('ext-comp-1019').setIconClass(icon); // First accordion
It seems that the setIconClass method is incorrectly placing the img tag before the tool, which should be after.
Quick override:
Code:
Ext.override(Ext.Panel, {
setIconClass : function(cls){
var old = this.iconCls;
this.iconCls = cls;
if(this.rendered && this.header){
if(this.frame){
this.header.addClass('x-panel-icon');
this.header.replaceClass(old, this.iconCls);
}
else{
var hd = this.header.dom;
var img = hd.firstChild && String(hd.firstChild.tagName).toLowerCase() == 'img' ? hd.firstChild : null;
var insertWhere = 'insertBefore';
if (this.collapsible || this.ownerCt.layout == 'accordion') {
/*
hd.firstChild is the tool icon for collapsing
*/
if (old) {
img = hd.childNodes[1] && String(hd.childNodes[1].tagName).toLowerCase() == 'img' ? hd.childNodes[1] : null;
}
else {
insertWhere = 'insertAfter';
}
}
if(img){
Ext.fly(img).replaceClass(old, this.iconCls);
}
else{
Ext.DomHelper[insertWhere](hd.firstChild, {
tag:'img', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+ this.iconCls
});
}
}
}
}
});