1. #1
    Sencha User
    Join Date
    Nov 2008
    Posts
    3
    Vote Rating
    1
    andrekpl is on a distinguished road

      1  

    Default Unanswered: Custom CellEditor - CompleteEdit on blur

    Unanswered: Custom CellEditor - CompleteEdit on blur


    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

    Code:
    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()
        });
    });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,872
    Answers
    653
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Posts
    3
    Vote Rating
    1
    andrekpl is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2011
    Posts
    29
    Vote Rating
    0
    indreshms is on a distinguished road

      0  

    Default


    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!

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,872
    Answers
    653
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2011
    Posts
    29
    Vote Rating
    0
    indreshms is on a distinguished road

      0  

    Default


    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

  7. #7
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    6
    Vote Rating
    0
    vinod.kumarv is on a distinguished road

      0  

    Default


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

    Vinod

  8. #8
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    15
    Vote Rating
    1
    Stokes is on a distinguished road

      1  

    Default One solution

    One solution


    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.

    Code:
            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.

  9. #9
    Sencha User
    Join Date
    Aug 2011
    Posts
    50
    Vote Rating
    16
    stevo.zilik will become famous soon enough

      1  

    Default


    +1 same problem

    Using what Stokes has provided, in a generic way:

    Code:
     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

  10. #10
    Sencha User
    Join Date
    Mar 2014
    Posts
    14
    Answers
    1
    Vote Rating
    0
    george4buxton is on a distinguished road

      0  

    Default


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