1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default [FIXED][2.x] Ext.Editor fires complete event on cancel

    [FIXED][2.x] Ext.Editor fires complete event on cancel


    Ext.Editor fires beforecomplete and complete events when canceling the edit or when entering invalid data.

    IMHO this is wrong, since all uses of Ext.Editor (TreeEditor, GridEditor) use the complete event to store the changed data (which doesn't change in this case).

    In the following example try:
    1. Double click the text and press Esc.
    2. Double click the text, clear the text and press Enter.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ext="http://www.extjs.com" xml:lang="en" lang="en">
    <head>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){
    	var ed = new Ext.Editor(new Ext.form.TextArea({
    		enterIsSpecial: true,
    		allowBlank: false
    	}),{
    		autoSize: 'both',
    		completeOnEnter: true,
    		cancelOnEsc: true,
    		updateEl: true,
    		listeners: {
    			beforecomplete: function() {
    				Ext.log('beforecomplete');
    			},
    			complete: function() {
    				Ext.log('complete');
    			},
    			canceledit: function() {
    				Ext.log('canceledit');
    			}
    		}
    	});
    	Ext.select('.editable').unselectable();
    	Ext.getBody().on('dblclick', function(e, target) {
    		ed.startEdit(target);
    	}, null, {delegate: '.editable'});
    });
    </script>
    </head>
    <body>
    	<div class="editable">Some content</div>
    </body>
    </html>
    Other things wrong:
    1. completeEdit with remainVisible:true will set editing to false, making the editor unusable.
    2. An invalid value with revertInvalid:false would commit the invalid value instead of keeping the editor open.
    3. An unchanged value with ignoreNoChange:true and remainVisible:true would still hide the editor.

    Suggested fix:
    Code:
    Ext.override(Ext.Editor, {
    	completeEdit : function(remainVisible){
    		if(!this.editing){
    			return;
    		}
    		if(!this.field.isValid()){
    			if(this.revertInvalid !== false){
    				this.cancelEdit(remainVisible);
    			}
    			return;
    		}
    		var v = this.getValue();
    		if(String(v) === String(this.startValue) && this.ignoreNoChange){
    			if(remainVisible !== true){
    				this.editing = false;
    				this.hide();
    			}
    			return;
    		}
    		if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
    			if(this.updateEl && this.boundEl){
    				this.boundEl.update(v);
    			}
    			if(remainVisible !== true){
    				this.editing = false;
    				this.hide();
    			}
    			this.fireEvent("complete", this, v, this.startValue);
    		}
    	},
    	cancelEdit : function(remainVisible){
    		if(this.editing){
    			var v = this.getValue();
    			this.setValue(this.startValue);
    			if(remainVisible !== true){
    				this.editing = false;
    				this.hide();
    			}
    			this.fireEvent("canceledit", this, v, this.startValue);
    		}
    	}
    });
    Last edited by Condor; 6 May 2009 at 12:00 AM. Reason: Added extra fixes

  2. #2
    Ext User
    Join Date
    Jan 2008
    Posts
    20
    Vote Rating
    0
    dsonet is on a distinguished road

      0  

    Wink thx, but how to understand IMHO?

    thx, but how to understand IMHO?


    thanks again.

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Updated to also include the problems located in this thread.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,663
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Fixed in both branches, removed some redundant code repetition.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext JS Premium Member
    Join Date
    Oct 2009
    Location
    Melrose, MA
    Posts
    48
    Vote Rating
    3
    hjones is on a distinguished road

      0  

    Default


    Just wanted to add a comment here that might help people trying to set revertInvalid on a Grid column editor.

    We were using the shorthand,

    Code:
    editor: {
        xtype: 'textfield',
        ....
        revertInvalid: false
    }
    which doesn't work - revertInvalid gets set on the textfield that is created but NOT on the editor.

    Its not visible in the API docs, but you can't just create an instance of Ext.Editor....there's a Ext.grid.GridEditor.

    You have to do something like this...

    Code:
    editor: new Ext.grid.GridEditor(new Ext.form.TextField({
    		...textfield config here...
    	}), {
    		...editor config here...
    
    		revertInvalid: false  // required to keep editing when invalid
    	})

Thread Participants: 3