1. #1
    Sencha User James Quall's Avatar
    Join Date
    Feb 2013
    Posts
    5
    Vote Rating
    0
    James Quall is on a distinguished road

      0  

    Default Answered: How to make a grid cell immediately exit edit mode when a combo box item is selected?

    Answered: How to make a grid cell immediately exit edit mode when a combo box item is selected?


    I have configured an Ext JS 4 grid to be editable by utilising the CellEditing plugin. Some cells in the grid have a textfield editor, and a few use a combo box editor. It all works great, but I have a small problem with the default behaviour of combo box editors.
    Basically, when editing a cell that has a combo box editor, if you select an item from the dropdown with your mouse, the "edit" mode of that cell doesn't finish. In other words, the cell doesn't immediately go out of edit mode and get marked as dirty. Instead, it will just sit there in edit mode until you go and click somewhere else on the page.
    I think it is unusual that Sencha has made this the default behaviour for combo box editors, but I won't complain. I would just like to know how to be able to select a combo box item and immediately take the cell out of edit mode, but I have no idea where to define this custom behaviour.
    Here's a small example JS fiddle to play with:
    http://jsfiddle.net/FFwkM/

  2. What if you complete editing on select of the combo?


    Code:
    xtype: 'combobox', store: stateStore, queryMode: 'local', displayField: 'name', valueField: 'name',
                    listeners: {
    
                        select: {
    
                            fn: function(c, r, eopts) {
    
                                c.ownerCt.completeEdit();
    
                            }
    
                        }
    
                    }
                }

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Answers
    85
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    What if you complete editing on select of the combo?


    Code:
    xtype: 'combobox', store: stateStore, queryMode: 'local', displayField: 'name', valueField: 'name',
                    listeners: {
    
                        select: {
    
                            fn: function(c, r, eopts) {
    
                                c.ownerCt.completeEdit();
    
                            }
    
                        }
    
                    }
                }

  4. #3
    Sencha User James Quall's Avatar
    Join Date
    Feb 2013
    Posts
    5
    Vote Rating
    0
    James Quall is on a distinguished road

      0  

    Default


    Thanks. That works, but I found that it crashes the browser sometimes due to some recursive calls to completeEdit().

    That said, I discovered this solution that works pretty well, courtesy of StackOverflow:

    Code:
    select: function(c, r, eopts) {
        c.fireEvent('blur');
    }

Thread Participants: 1

Tags for this Thread