Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ExtJs 4 GridPanel with CellEditing: data entered is lost on failed validation

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:

  1. I've looked into 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 seem to use Ext.Editor. I've tried providing a Ext.Editor into the Editor field of the grid column, but that produced un-editable text.
  2. I've tried placing revertInvalid everywhere I could but this was always a far-shot.

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});                           
                }
           }]
    }
like image 832
applepie Avatar asked Nov 13 '22 00:11

applepie


1 Answers

This worked for me (Extjs 4.2):

Ext.override(Ext.Editor, { revertInvalid: false });
like image 147
MatteoSp Avatar answered Dec 05 '22 14:12

MatteoSp