Adding the includeClassIf Method to Ext.Element

October 1st, 2009 Author: wmeurer

I’ve created an includeClassIf method on Ext.Element with the following code:

Ext.override(Ext.Element,{
includeClassIf: function(cls,condition){
condition ? this.addClass(cls) : this.removeClass(cls)
}
});

There are few situations when Ext.Element.toggleClass is the best choice. In fact, just willy nilly toggling anything is risky because you’re assuming that whatever the current state, you want it to be the opposite. That’s messy in most cases.

Then there’s addClass and removeClass, but those are literal, so you must switch between the two using a conditional if you know the state you want to use.

What’s missing in the Ext.Element Class is a way to specify the css class and the state dynamically, when the desired state is known. So with the includeClassIf method, you can do the following:

var state = checkbox.checked;
Ext.get('some_div').includeClassIf('selected',state);

instead of:

var state = checkbox.checked;
if(state){
Ext.get('some_div').addClass('selected');
} else {
Ext.get('some_div').removeClass('selected');
}

Entry Filed under: Uncategorized, User Interface