1. #1
    Sencha User vmorale4's Avatar
    Join Date
    Mar 2007
    Location
    Chicago, IL
    Posts
    189
    Vote Rating
    1
    vmorale4 is on a distinguished road

      1  

    Question [HOWTO] 'grey-out' labels when a field is disabled

    [HOWTO] 'grey-out' labels when a field is disabled


    By default when you disable a field, it only 'greys-out' the field. If the field that you are disabling has a label associated, nothing would happen to it (unlike fat client GUIs). I found this counter-intuitive, so I wrote some code to override this behavior:

    PHP Code:
     Ext.form.Field.prototype.afterRender Ext.form.Field.prototype.afterRender.createInterceptor(function(){
            if(
    this.disabled) {
                
    this.container.parent().addClass('x-item-disabled');
            }
        });
        
        
    Ext.form.Field.prototype.disable Ext.form.Field.prototype.disable.createInterceptor(function(){
            if(
    this.container) {
                
    this.container.parent().addClass('x-item-disabled');
            }
        });    
        
        
    Ext.form.Field.prototype.enable Ext.form.Field.prototype.enable.createInterceptor(function(){
            if(
    this.container) {
                
    this.container.parent().removeClass('x-item-disabled');
            }    
        }); 

    I hope this helps somebody else....
    Attached Images
    Last edited by mystix; 24 Mar 2008 at 10:14 PM. Reason: moved to Examples and Extras from Open Discussion

  2. #2
    Ext User violinista's Avatar
    Join Date
    Apr 2007
    Location
    Serbia
    Posts
    293
    Vote Rating
    0
    violinista is on a distinguished road

      0  

    Default


    Very neat, thanks
    "It is better to be young, pretty and rich instead old, ugly and poor."
    (c) Alan Ford.

  3. #3
    Sencha User
    Join Date
    Oct 2013
    Posts
    1
    Vote Rating
    0
    Mongoose_King is on a distinguished road

      0  

    Default


    Super

  4. #4
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    another way instead using interceptors would be an override. Extjs5 has a fine way to do this, just place a file in app/override/form/field/Field.js with this content:

    Code:
    Ext.define('MyAPP.override.form.field.Field', {
      override: 'Ext.form.field.Field',
    
      onDisable: function() {
        this.container.parent().addCls(this.disabledCls);
        this.callParent();
      },
    
      onEnable: function() {
        this.container.parent().removeCls(this.disabledCls);
        this.callParent();
      }
    
    });
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5