[2.2.x] Panel.setIconClass breaks for any collapsible panel

[jay@moduscreate.com]

Reproduce:

go to: http://extjs.com/deploy/dev/examples...t/complex.html
observe icons for east, west, south and accordion panels.

paste:

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:

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
					});
				 }
			}
		}
	}
			 
			 
});

[bloudon]

That override only works when the panel has a single tool.

This worked better for me:

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 img = this.header.child('.x-panel-inline-icon');

                if (img) {
                    img.replaceClass(old, this.iconCls);
                }else{
                    var tool = this.header.last('.x-tool');

                    if ( tool ) {
                        Ext.DomHelper.insertAfter(tool, {
                            tag: 'img', src: Ext.BLANK_IMAGE_URL,
                            cls: 'x-panel-inline-icon '+ this.iconCls
                        });
                    }
                    else {
                        Ext.DomHelper.insertBefore(this.header.dom.firstChild, {
                            tag: 'img', src: Ext.BLANK_IMAGE_URL,
                            cls: 'x-panel-inline-icon '+ this.iconCls
                        });
                    }
                 }
            }
        }
    }
});

[jay@moduscreate.com]

Awesome. I have yet to construct something with more than one tool

[Drayton]

I wonder why they didn't fix this in 2.2.1?

[temporary]

*bump*

This is still not fixed in 2.3.0.
Don't know if this is fixed in 3.0.0.