I am using ExtJs grid with the CellEditing plugin. It works fine, except that invalid values are lost when it does not perform the check that I imposed on it.
For example, if I have an editable text field in the grid that does not allow values of more than 10 characters, and the user enters "olympicssucks", the check will fail and a red frame will appear around the text field. When the user leaves the field, the value of "olympicssucks" will be lost.
I want the grid to retain invalid data and keep a red border around it.
Another (maybe more understandable) example: http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/cell-editing.html Try editing the first cell: "Adder's-Tongue" and make it empty. Pay attention to the red box and confirmation. Now click on the box. A failed check will return the cell back to its original value , Adder's-Tongue.
tl; dr: My question, repeated, is that I want to keep an invalid value, but there is still a check showing the red frame around it . I'm sure it is possible, but how to do it?
What I tried:
- I looked at Ext.Editor and it seems promising because it has a config property called revertInvalid that does exactly what I want. Unfortunately, it seems that the CellEditing plugin does not use Ext.Editor . I tried to provide Ext.Editor in the Grid column editor field, but this created text that was not editable.
- I tried putting revertInvalid wherever I could, but that was always successful.
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}); } }] }