PDA

View Full Version : Custom CellEditor - CompleteEdit on blur



andrekpl
7 Jul 2012, 4:07 AM
Hi!
I have a custom cell editor for a grid, say the htmleditor. (It's not but has the same issue).
When clicking outside the grid while editing a cell, the cell editor is not closed.
I tried to use the blur event but w/o success (too many components in htmleditor can have the focus, I guess).
Any idea how to trigger the completeEdit event?

See code at http://jsfiddle.net/rC6Q7/

Thanks for any hint
andre



Ext.onReady(function() {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name'],
data: {
'items': [{
"name": "Lisa"
}, {
"name": "Bart"
}, {
"name": "Homer"
}, {
"name": "Marge"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: 'htmleditor'
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
});

scottmartin
7 Jul 2012, 9:56 AM
Why would you want to place such a heavy component in the place of an editor in a grid cell?
I would really look for an alternative solution ..

If you must, then I would recommend having a look at:
http://skirtlesden.com/ux/component-column

It allows components to be placed in cells.

Scott.

andrekpl
7 Jul 2012, 10:07 AM
Thanks Scott, that's what I'm currently doing, but it's not the preferred solution.
What I'm trying to build is a kind of a property grid. Some properties are not just primitives, e.g. 2x2 grids or rich texts. And it would be better for usability if all properties can be edited in place, not just some.

It's not the issue to display a complex custom cell editor. The issue is to hide it when it looses focus.

andre

indreshms
7 Jul 2012, 10:27 AM
Facing the same issue as well. I am able to show the editor get/set the value. But the editor does not go off when I click elsewhere on the grid!

scottmartin
7 Jul 2012, 11:13 AM
Have you seen property grid?
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/property.html

My approach would be to have a button or actioncolumn to display a popup for the html editor.

@indreshms, are you using an editor?

Scott.

indreshms
7 Jul 2012, 11:30 AM
Scott. Yes I am using a custom cell editor (in my case it is a field container which in turn has a text field and a button). While debugging I found that the cell editing plugin will wait for a "blur" event from the editor and react to the event by hiding the editor. Since I am using a field container (which cannot be directly focused), I had to re-route the textfield's "blur" event. Now the editor goes of.

But now I have an additional problem to solve. Since field container is not a focusable entity, the plugin wont call focus! Any help?

Thanks

vinod.kumarv
31 Jul 2012, 10:16 PM
@ Sencha Team,
Any update on the issue being discussed above.

Vinod

Stokes
5 Oct 2012, 10:37 AM
I have solved this problem before. Not sure I have time to post a complete solution, but here's the idea: Listen for clicks in the document and test to see if they're outside the bounds of my custom editor's field. This sounds harsh, but it's the same kind of thing done by the combo box to auto-close the picker when the user clicks away from the dropdown list.



var editor = ...; // create my custom CellEditor
// either in the editor class, or elsewhere, define a method that will be called on document click
Ext.override(editor, {
// called when a click occurs anywhere in the document!
checkDocumentClick: function(event) {
// Registering for this event is pretty cheap, but this contains() call can be expensive, so
// we'll have to watch for performance issues.
if (this.editing) {
if (this.field.getEl() && !this.field.getEl().contains(event.target)) {

// We're editing, and the click was not on this field directly. However, the user could have
// clicked on the popup swatches used for selecting colors. So let's also see if the click was
// within the bounds of this component.
var fieldBox = this.field.getBox();
var clickPoint = event.getXY();
if ( (fieldBox.x > clickPoint[0]) ||
(fieldBox.y > clickPoint[1]) ||
(fieldBox.x + fieldBox.width < clickPoint[0]) ||
(fieldBox.y + fieldBox.height < clickPoint[1])
){
// The click is outside of the bounds of this component too, so we should close the
// hovering CellEditor.
this.completeEdit();
}
}
}
}
});
// With the CellEditor-HtmlEditor combination, it doesn't always detect when we're done editing, so we add a
// click-anywhere listener to handle those cases.
editor.mon(Ext.getDoc(), 'mousedown', editor.checkDocumentClick, editor);


Hope that helps,
Stokes.

stevo.zilik
27 Oct 2013, 7:09 AM
+1 same problem

Using what Stokes has provided, in a generic way:


Ext.override(Ext.grid.CellEditor, {
checkDocumentClick: function (event) {
// Registering for this event is pretty cheap, but this contains() call can be expensive, so
// we'll have to watch for performance issues.
var editor
if (this.editing) {
if (this.field.getEl() && !this.field.getEl().contains(event.target)) {

// We're editing, and the click was not on this field directly. However, the user could have
// clicked on the popup swatches used for selecting colors. So let's also see if the click was
// within the bounds of this component.
var fieldBox = this.field.getBox();
var clickPoint = event.getXY();
if ((fieldBox.x > clickPoint[0]) ||
(fieldBox.y > clickPoint[1]) ||
(fieldBox.x + fieldBox.width < clickPoint[0]) ||
(fieldBox.y + fieldBox.height < clickPoint[1])
) {
// The click is outside of the bounds of this component too, so we should close the
// hovering CellEditor.
this.completeEdit();
}
}
}
},
onRender: function () {
this.callParent();
this.mon(Ext.getDoc(), 'mousedown', this.checkDocumentClick, this);
}
});

That solves it

george4buxton
2 May 2014, 12:02 PM
+1 same problem. I will try some of the work around code but I would hope that Sencha would instead address this: it definitely seems like bug territory to me. Specifically my use case is that I am merely trying to click on the grid panel's save button -- I should *not* have to click on it twice.

george4buxton
6 May 2014, 6:42 AM
The solution *should* be to handle the mousedown event of the button -- it should fire before the blur of the editor, at least that is what is suggested by this stackoverflow post (http://stackoverflow.com/q/6939306/34806), actually just one among many.

george4buxton
6 May 2014, 12:53 PM
I've posted an answer that creates an interceptor on a specific button instance's onMouseDown method (the mousedown event *not* being exposed) on SO: http://stackoverflow.com/q/23504280/34806

ashokram
11 Feb 2015, 1:05 AM
Hi,

I am having "datefield" and "timefield" inside "Ext.form.FieldContainer", I have overrided "Ext.grid.CellEditor" like


Ext.override(Ext.grid.CellEditor, { checkDocumentClick : function(event) {
var editor
if (this.editing)
{
if (this.field.getEl() && !this.field.getEl().contains(event.target))
{
this.completeEdit();
}
}
},
onRender : function() {
this.callParent();
this.mon(Ext.getDoc(), 'mousedown', this.checkDocumentClick, this);
}
});

when I click on the date inside datepicker also the cell is closing, the same behavior is happening on timefield, when I select the hours, the cell is closing, I only want to close the cell, when we click outside of the field, except datepicker or timefield drop down, can someone please help me on this.

Thank You in Advance.