[FIXED]Patch for Ext.core.Element.removeCls

[kyr0]

Hi!

I traced a bug through the library back to the core method named above.
The bug can be recognized in action in the pagination examples of Ext4 pr1 for example.
You will see that the prev,next,first,last buttons will not be en/disabled either if the
store has more items to display etc.

This behaviour belongs to the fact that Ext.Component's this.disabledCls can be consist of more than
one CSS class name. e.g. "x4-btn-disabled x4-btn-toolbar-disabled". This is e.g. the case when
components get encapsulated in container instances. (like here: Button in PaginationToolbar)

Ext.Container calls enable() and disable() correctly, but the internal call to this.el.removeCls()
has no effect since removeCls() does checking, if the given class name is an Array but doesn't split class name lists, devided by spaces before.

Currently the code is (pr1):

if (!Ext.isArray(className)){
className = [className];
}

You can imagine that this will not work with class names given as string but devided with spaces, since the following code of the methods expects each CSS class name to be _single_ class name inside of the className Array.

To fix that, simply replace this line by:
className = className.split(spacesRe);

Also you should add a check for undefined input values before checking className to be Array or not,
since Ext.Component can provide implicit this.el.removeCls(undefined); (which seems to be another bug at the other hand..)

The patched method fixes all multiple-encapsulated enable()/disable() component bugs in ExtJS4 pr-1:

/**
* Removes one or more CSS classes from the element.
* @param {String/Array} className The CSS class to remove, or an array of classes
* @return {Ext.core.Element} this
*/
removeCls : function(className){
var me = this,
i,
idx,
len,
cls,
elClasses;

if (!Ext.isDefined(className)) {
return me;
}
if (!Ext.isArray(className)){
className = className.split(spacesRe);
}
if (me.dom && me.dom.className) {
elClasses = me.dom.className.replace(trimRe, '').split(spacesRe);
for (i = 0, len = className.length; i < len; i++) {
cls = className[i];
if (typeof cls == 'string') {
cls = cls.replace(trimRe, '');
idx = Ext.Array.indexOf(elClasses, cls);
if (idx != -1) {
elClasses.splice(idx, 1);
}
}
}
me.dom.className = elClasses.join(" ");
}
return me;
},

You will find this method in pr1 in the core-debug and core-debug-sandbox files at e.g line: 10070.

Hope I saved a little of your time && enjoy!

Best regards from munich,
Aron

[kyr0]

Okay - pr2 solves the bug in nearly the same approach =)
Good work!

Thread can be closed.

Best regards,
Aron