Results 1 to 4 of 4

Thread: x-grid-dirty-cell on all types of fields

  1. #1

    Default x-grid-dirty-cell on all types of fields

    I really like the little red corner on the editable grid so i added it to all types of form fields. You guys should think about making that a standard feature (that can be turned off of course)...

    It's pretty much exactly like the error icon stuff...

    addition to Ext.form.Field
    Code:
    ...
      initEvents : function(){
            this.el.on(Ext.isIE ? "keydown" : "keypress", this.fireKey,  this);
            this.el.on("focus", this.onFocus,  this);
            this.el.on("blur", this.onBlur,  this);
            this.on("valid",this.markDirty,this);
                    this.originalValue = this.getValue();
        },
    ...
     markDirty : function(){
         
            if(this.isDirty()){
                 if(!this.dirtyIcon){
                        var elp = this.el.findParent('.x-form-element', 5, true);
                        this.dirtyIcon = elp.createChild({cls:'x-grid-dirty-cell'});
                        this.dirtyIcon.setSize(10,10);
                    }
                   this.alignDirtyIcon();
                   this.dirtyIcon.show();
                   this.on('resize', this.alignDirtyIcon, this);
            }
            else{
                
                if(this.dirtyIcon){
                     this.dirtyIcon.hide();
                }
                
            }
         
        },
        
         alignDirtyIcon : function(){
            this.dirtyIcon.alignTo(this.el, 'tl', [0, 0]);
        },
    
    ...
    Last edited by mystix; 12 Sep 2007 at 6:46 PM. Reason: moved to User Extensions from General

  2. #2

    Default

    I just realized that this could cause some positioning problems with other elements so i added the one line to position the red corner absolutely instead of relatively

    Code:
    ...
      initEvents : function(){
            this.el.on(Ext.isIE ? "keydown" : "keypress", this.fireKey,  this);
            this.el.on("focus", this.onFocus,  this);
            this.el.on("blur", this.onBlur,  this);
            this.on("valid",this.markDirty,this);
                    this.originalValue = this.getValue();
        },
    ...
     markDirty : function(){
         
            if(this.isDirty()){
                 if(!this.dirtyIcon){
                        var elp = this.el.findParent('.x-form-element', 5, true);
                        this.dirtyIcon = elp.createChild({cls:'x-grid-dirty-cell'});
                        this.dirtyIcon.setSize(10,10);
                        this.dirtyIcon.setPositioning("position: absolute");
                    }
                   this.alignDirtyIcon();
                   this.dirtyIcon.show();
                   this.on('resize', this.alignDirtyIcon, this);
            }
            else{
                
                if(this.dirtyIcon){
                     this.dirtyIcon.hide();
                }
                
            }
         
        },
        
         alignDirtyIcon : function(){
            this.dirtyIcon.alignTo(this.el, 'tl', [0, 0]);
        },
    
    ...

  3. #3

    Default minor update

    Many thanks for your example.

    Code:
    Ext.override(Ext.form.Field, {
        initEvents : function(){
            this.el.on(Ext.isIE ? "keydown" : "keypress", this.fireKey,  this);
            this.el.on("focus", this.onFocus,  this);
            this.el.on("blur", this.onBlur,  this);
    		this.on("valid",this.markDirty,this);
            // reference to original value for reset
            this.originalValue = this.getValue();
        },
    	markDirty : function(){
         
            if(this.isDirty()){
                 if(!this.dirtyIcon){
                        var elp = this.el.findParent('.x-form-element', 5, true);
                        this.dirtyIcon = elp.createChild({cls:'x-grid3-dirty-cell'});                   
                        this.dirtyIcon.setSize(10,10);
                        this.dirtyIcon.setPositioning("position: absolute");
                    }
                   this.alignDirtyIcon();
                   this.dirtyIcon.show();
                   this.on('resize', this.alignDirtyIcon, this);
            }
            else{            
                if(this.dirtyIcon){
                     this.dirtyIcon.hide();
                }
                
            }
         
        },    
        alignDirtyIcon : function(){
            this.dirtyIcon.alignTo(this.el, 'tl', [0, 0]);
        }  
    });

  4. #4
    Sencha User
    Join Date
    Nov 2008
    Posts
    47

    Default

    Made alteration to use this in EXT 3.0

    [CODE]
    Ext.override(Ext.form.Field, {
    initEvents: function () {
    this.el.on(Ext.isIE ?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •