Ext.grid.plugin.CellEditing blur Event?

[timTaylor]

Hi,
I'm using the Ext.grid.plugin.CellEditing - plugin on an Ext.tree.Panel.

ExtJS version: "4.0.7"

the plugin setup looks like this:

this._cellEditor = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 2,
    listeners: {
        beforeEdit: function (e, eOpts)
        {
            console.log('beforeEdit');
        },
        edit: function (theEditor, e, eOpts)
        {
            console.log('edit');
        },
        validateedit: function (editor, e)
        {
            console.log('validateedit');
        }
    }, 

the editable column looks like this:

columns : [
                        {
                            xtype     : 'treecolumn', //this is so we know which column will show the tree
                            text      : 'myEditableColumn',
                            flex      : 2,
                            sortable  : true,
                            dataIndex : 'text', 
                            editor    : {
                                xtype: 'textfield',
                                allowBlank : false
                            }
                        }
                    ], 

My Problem:
If I start editing, leave the Input-Field blank and click somewhere, the editor closes and none of the Events get fired!

What do I want:
If the User leaves the Input-Field blank, an error notification should show up that he has to input at least 3 characters.

Please help ... I'm struggling around with this problem since a few Days!
Also tried 'allowBlur:false' but this doesn't help though this is a property of Ext.Editor and Ext.grid.plugin.CellEditing is extended from Ext.Editor.

[Romick]

I have some plugin overriding becouse it not working well. Here it is:

Ext.define('Ext.CellEditing', {
  extend: 'Ext.grid.plugin.CellEditing',
  alias: 'widget.cellediting',

  getEditingContext: function(record, columnHeader) {
    var me = this,
      grid = me.grid,
      store = grid.store,
      rowIdx,
      colIdx,
      view = grid.getView(),
      value;

    if (Ext.isNumber(record)) {
      rowIdx = record;
      record = store.getAt(rowIdx);
    } else {
      if (store.indexOf) {
        rowIdx = store.indexOf(record);
      } else {
        if (columnHeader.ownerCt.lockableInjected) {
            if (columnHeader.locked) {
                rowIdx = view.lockedView.indexOf(view.lockedView.getNode(record));
            } else {
                rowIdx = view.normalView.indexOf(view.normalView.getNode(record));
            }
        } else {
            rowIdx = view.indexOf(view.getNode(record));
        }
      }
    }
    if (Ext.isNumber(columnHeader)) {
      colIdx = columnHeader;
      columnHeader = grid.headerCt.getHeaderAtIndex(colIdx);
    } else {
      colIdx = columnHeader.getIndex();
    }

    value = record.get(columnHeader.dataIndex);
    return {
      grid: grid,
      record: record,
      field: columnHeader.dataIndex,
      value: value,
      row: view.getNode(rowIdx),
      column: columnHeader,
      rowIdx: rowIdx,
      colIdx: colIdx
    };
  }
}); 

Why do you use _? this._cellEditor
In tree.Panel config:

     plugins: Ext.create('Ext.CellEditing', {
          clicksToEdit: 1,
          autoCancel: false,
          listeners: {
            'beforeedit': function(obj) {},
            'afteredit': function(editor, obj) {}
          }
    }); 

Have a nice day!

[timTaylor]

Romick, thanks A LOT!
Now i get an notification via the 'afteredit' event, if I click somewhere in my Tree.
But: I still get no notification if i click outside the Tree-containing window.
Any Idea?

I'm using this._cellEditor because this is all inside a display() function of a class.
I'm not following the flash-like-approach myclass extends sprite / myclass extend: 'Ext.Window'.

Best regards