enhancement (proposal) for component.setDisabled

[robert.peszek]

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:

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:

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:

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.

[edspencer]

Interesting suggestion, would like to hear if others would value such a thing. I see a large number of possible ways to do this so whatever the outcome is it would have to be abstract enough that separate implementations could be swapped in and out.

Just for the record though, our top priority right now is polishing what's already present before we think about adding new features.

[robert.peszek]

our top priority right now is polishing what's already present before we think about adding new features

That is quite understandable. Thanks!