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

**Condor** · 26 Sep 2008 12:21 AM

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);
		}
	}
});

**dsonet** · 9 Oct 2008 12:53 AM

thanks again.

**Condor** · 5 May 2009 11:59 PM

Updated to also include the problems located in this thread.

**evant** · 6 May 2009 1:21 AM

Fixed in both branches, removed some redundant code repetition.

**hjones** · 20 Sep 2010 11:51 AM

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
	})

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

Thread Tools

Search Thread

Display

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

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

thx, but how to understand IMHO?

thx, but how to understand IMHO?