PDA

View Full Version : Ext.grid.plugin.CellEditing blur Event?



timTaylor
16 May 2012, 6:24 AM
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
16 May 2012, 6:34 AM
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
16 May 2012, 7:34 AM
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