You found a bug! We've classified it as EXTJS-10529 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member glopes's Avatar
    Join Date
    Jan 2013
    Location
    Chicago
    Posts
    112
    Vote Rating
    27
    glopes will become famous soon enough glopes will become famous soon enough

      1  

    Default Problem with Grid Editor blur and focus

    Problem with Grid Editor blur and focus


    Hi,

    I have a grid with two columns and an editor set like this:

    Code:
    {
        xtype : 'gridpanel',
        height : 91,
        itemId : 'rc_scrapGrid',
        margin : '0 0 5 0',
        width : 305,
        scroll : false,
        store : 'scrapArrayStore',
        columns : [{
                xtype : 'numbercolumn',
                sortable : false,
                dataIndex : 'scrapQty',
                text : 'Scrap Qty (Ft)',
                format : '0,000',
                editor : {
                    xtype : 'numberfield',
                    allowDecimals : false,
                    minValue : 0
                }
            }, {
                xtype : 'gridcolumn',
                renderer : function (value, metaData, record, rowIndex, colIndex, store, view) {
                    var v = '';
                    Ext.getStore('scrapReasonStore').findBy(function (record) {
                        if (record.get('ID_REASO') == value) {
                            v = record.get('ID_DS_REASO');
                            return true; // findby
                        }
                    });
                    return v;
                },
                sortable : false,
                dataIndex : 'scrapReason',
                emptyCellText : '-- Select --',
                text : 'Scrap Code',
                flex : 1,
                editor : {
                    xtype : 'combobox',
                    emptyText : '-- Select --',
                    editable : false,
                    displayField : 'ID_DS_REASO',
                    queryMode : 'local',
                    store : 'scrapReasonStore',
                    valueField : 'ID_REASO'
                }
            }
        ],
        plugins : [
            Ext.create('Ext.grid.plugin.CellEditing', {
                pluginId : 'editChangeOverScrap',
                clicksToEdit : 1,
                listeners : {
                    edit : {
                        fn : me.onCellEditingEdit,
                        scope : me
                    }
                }
            })
        ]
    }
    My problem is after I edit one field like Scrap Qty and click outside the grid, lets say... I click on the next textfield outside the grid, my cursor is automatically focused on the grid again. This problem really bothers my end users and I don't know how to fix it.

    Any suggestions?

    Thanks

    *EDIT BY SLEMMON
    Issue observed in 4.2.1. Tested OK in 4.2.0.
    Inline test case:
    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
            {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
            {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
            {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
        ]},
        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', editor: 'textfield'},
            {header: 'Email', dataIndex: 'email', flex:1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {header: 'Phone', dataIndex: 'phone'}
        ],
        selType: 'cellmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
    
    
    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
    
    
        // The form will submit an AJAX request to this URL when submitted
        url: 'save-form.php',
    
    
        // Fields will be arranged vertically, stretched to full width
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
    
    
        // The fields
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        },{
            fieldLabel: 'Last Name',
            name: 'last',
            allowBlank: false
        }],
    
    
        // Reset and Submit buttons
        buttons: [{
            text: 'Reset',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }, {
            text: 'Submit',
            formBind: true, //only enabled once the form is valid
            disabled: true,
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    form.submit({
                        success: function(form, action) {
                           Ext.Msg.alert('Success', action.result.msg);
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('Failed', action.result.msg);
                        }
                    });
                }
            }
        }],
        renderTo: Ext.getBody()
    });
    Last edited by slemmon; 2 Jul 2013 at 10:35 AM. Reason: Additional test notes

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

    *I moved the thread to the bug forum so that I could move the issue on to the bug tracker.

  3. #3
    Sencha Premium Member glopes's Avatar
    Join Date
    Jan 2013
    Location
    Chicago
    Posts
    112
    Vote Rating
    27
    glopes will become famous soon enough glopes will become famous soon enough

      0  

    Default


    Hi SLEMMON,

    Any idea on how I could avoid this problem while a fix isn't ready?

    Thanks,

  4. #4
    Sencha User
    Join Date
    Dec 2013
    Posts
    1
    Vote Rating
    0
    seza is on a distinguished road

      0  

    Default


    Hi, please, provide fix. Problem reproduced in Extjs 4.2.2.Thanks

  5. #5
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    4
    Vote Rating
    0
    jsve is on a distinguished road

      0  

    Default


    @slemmon I am glad that this bug is being investigated. We are currently implementing a CellEditable grid in our application and this bug is a major issue for us because our users must click twice to start editing outside of the grid.

    Example: https://fiddle.sencha.com/#fiddle/5i8

    Ext version tested:
    • Ext 4.2.1
    • Ext 4.2.2
    • Ext 5.0.0.736
    Browser versions tested against:
    • Chrome 34
    • IE11
    • Firefox 27
    Steps to reproduce the problem:
    1. Create a grid panel with editable cells
    2. Create a date field outside of the grid panel
    3. Click inside the grid and start editing
    4. Click on the date field
    The result that was expected:
    • The date field should be focused
    The result that occurs instead:
    • The date field is focused for a brief moment and then focus returns to the grid

Thread Participants: 3

Tags for this Thread