I see a lot of hard to maintain code dealing with enabling/disabling components.
Would it not be COOL if Ext provided some help. Typically application needs to disable/enable components based in response to different things like: security roles, dirty state of the form, mode of entry (delete button disabled for new entries, enabled for editing existing), or some complex form of validation/business logic.
It boils down to the following: components have REASONS for being disabled, component should be enabled if there are no such reasons, disabled if there is one or more reason to be disabled. I think of this a voting, various parts of logic vote but instead of Yea and Nay they get to say Yea or Veto.
So something like this would be useful:
Code:
Ext.override(Ext.Component, {
setDisabledBecause: function(disable, reason){
var component=this;
Ext.applyIf(component, {_disableBecause : []});
if(disable){
if(!Ext.Array.contains(component._disableBecause, reason)){
component._disableBecause.push(reason);
}
if(component.setDisabled && component._disableBecause.length==1) {
component.setDisabled(true);
}
} else {
Ext.Array.remove(component._disableBecause, reason);
if(component.setDisabled && component._disableBecause.length==0) {
component.setDisabled(false);
}
}
}
});
Now I could do things like:
Code:
deleteButton.setDisabledBecause(myForm.editMode===’new’, ‘reason-editmode’);
deleteButton.setDisabledBecause(Ext.Array.contains(mySecurity.myRoles, ‘DELETE_AUTHORITY’, ‘reason-security’);
myFrom.on(“dirtychange”, function(comp, dirty){
deleteButton.setDisabledBecause(dirty, “reason-dirtystate”); //enable only if form is not dirty
});
and all the interaction between disabling/enabling is handled internally by the component.
But it could get even better than that! With this design, the next step is declarative enabling/disabling of components, in my form declaration I could do things like:
Code:
buttons:[ {text: ‘Save’, disableIf_dirtystate: 'clean', disableIfNot_securityRole: ‘admin’}]
and write generic logic using component query to handle things like “dirtychange” events, etc.
Some o f this declarative disabling/enabling could be built into Ext itself or provided by ux.
The same pattern could be applied to visibility: setHiddenBECAUSE(hide, reason) ...
I wish such disabled/enabled handling was part of all UI frameworks, I have not seen it anywhere, only some ugly code trying to deal with the enabled/disabled state.