PDA

View Full Version : Remote Validation and Cell Editing with ComboBox



MichaelEr
26 Apr 2012, 4:30 AM
Hi,

I extended the combobox widget to realize an autocomplete feature. The combobox works fine when using it in a form. When I use it as an cell editor I got the problem that it sometimes does not accept the value if I press the 'return' key for a value from the combobox. The value is resetted to the old value. I think this is caused because of the remote validation. I think, the editor is terminated first, before the callback method is called, so the callback behaviour isn't able to set the value. When I select the value from the combobox by using the mouse, the value is always acceppted because the editor keeps open. Any suggestions?

Other questions: How to disable the functionality that the editor closes itself when pressing 'return'?

Kind regrads
Michael

That's the combobox definition:

Ext.define('...Expression', {
alias : 'widget.expression',
extend : 'Ext.form.field.ComboBox',
id : 'expression',

editable : true,
forceSelection : false,
hideTrigger : true,
typeAhead : true,
queryMode : 'remote',
displayField : 'text',
valueField : 'value',

store : Ext.create('Ext.data.Store', {
fields : ['text'],
autoLoad : false,
data : [],
load : Ext.emptyFn
}),

textValid : true,
validator : function() {
return this.textValid;
},
listeners : {
'select' : function(combobox, records) {
var selected = records[0];
combobox.setValue(selected);
},
'change' : function(textfield, newValue, oldValue) {
var expressionValidateCallback = Ext.bind(function(result,
e) {
if (result.length == 0) {
textfield.clearInvalid();
textfield.textValid = true;
} else {
textfield.markInvalid(result[0].message);
textfield.textValid = false;
}
}, this);

var autocompleteCallback = Ext.bind(function(result, e) {
this.store.loadData(result);
this.validateExpression(newValue, expressionValidateCallback);
}, this);

if (this.hasFocus) {
var cursorPosition = this.getCursorPosition();
if (cursorPosition === -1) {
return;
}
autocompleteAction.getAutocomplete(
newValue, cursorPosition,
null, null, autocompleteCallback);
} else {
autocompleteAction.getAutocomplete(
newValue, 0, null, null,
autocompleteCallback);
}
}
},

validateExpression : function(value, callback) {
expressionValidatorActions.validateExpression(value, callback);
}
});


Thanks in advance!