Custom CellEditor - CompleteEdit on blur

[andrekpl]

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]

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]

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]

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]

Have you seen property grid?
http://dev.sencha.com/deploy/ext-4.1.../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]

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]

@ Sencha Team,
Any update on the issue being discussed above.

Vinod

[Stokes]

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]

+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]

+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.