I am using a ExtJs Grid with the CellEditing plugin. It works perfectly except that invalid values are lost when it fails the validation I imposed on it.
For example, if I have a editable textfield in the grid that doesn't allow values over 10 characters, and the user enters "olympicssucks" the validation will fail and a red box will appear around the textfield. When the user clicks out of the field the value "olympicssucks" will be lost.
I want the grid to still save the invalid data, and keep the red box around it.
Another (maybe more clear) example: http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/cell-editing.html Try editing the first cellvalue: "Adder's-Tongue" and make it empty. Notice the red box and validation message. Now click out of the box. The failed validation will revert the cell back to its original value, Adder's-Tongue.
tl;dr: My question, restated, is that I want to keep the invalid value, and yet still have validation displaying a red box around it. I'm sure its possible, but how is it done?
What I've tried:
Code:
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
var grid = {
xtype: 'grid', store: dataStore, plugins: [cellEditing],
columns: [
{
text: 'Items', dataIndex: 'items', flex: 1, sortable : false,
editor: {
xtype: 'textfield',
validator: function(value) { //custom validator to return false when value is empty and other conditions}
},
//...
],
tbar: [{
xtype: 'button', text: 'Add ' + type,
handler: function() {
dataStore.insert(0, {items: 'New ' + type});
cellEditing.startEditByPosition({row: 0, column: 0});
}
}]
}
This worked for me (Extjs 4.2):
Ext.override(Ext.Editor, { revertInvalid: false });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With