I have a grid column containing combobox as its editor and am using celleditor
plugin in which I want to write some validation logic. When I try to select something from the combobox cell, it is expected to lose its focus after the value is changed and then it should go to the validateedit
listener. I know there is a blur()
method on combobox which will resolve this issue. But as per document, it is a private method so am avoiding that. I wanted to know if there is another way to lose the focus on change or picker collapse or any config which will perform validation on change of field.
Below is the code and fiddle.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa@simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart@simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer@simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge@simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Email',
dataIndex: 'email',
flex: 1,
getEditor: function () {
return {
validateOnChange: false,
validateOnBlur: false,
xtype: 'combobox',
allowBlank: false,
displayField: "name",
listeners: {
blur: function () {
console.log("blurred");
},
change: function () {
console.log('change');
// this.blur();
}
},
store: {
data: [{
name: "A"
}, {
name: "B"
}, {
name: "C"
}, {
name: "D"
}]
}
}
}
}],
selModel: 'cellmodel',
plugins: {
cellediting: {
clicksToEdit: 1,
listeners: {
validateedit: function () {
console.log("validated")
}
}
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
}
});
You can try completeEdit method as an alternative:
listeners: {
blur: function () {
console.log("blurred");
},
change: function () {
console.log('change');
this.up('grid').getPlugin().completeEdit();
}
},