Results 1 to 2 of 2

Thread: Grid cell editing focus not working correctly on tab key

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    12

    Exclamation Grid cell editing focus not working correctly on tab key

    Hi All

    I have Ext.grid.Panel with some of the columns who have an editor attached to them.

    Everything works fine when I test in Chrome, but when I text this in IE8 the changing of cells doesn't work when using the tab key for the last column of editable cells.

    In the same grid I have a one editor as a datefield, one as a timefield and the last as a text field.

    When debugging through the extjs code, I can see both on the screen a stepping through the code that the editor is triggered correctly and the cell becomes editable, but then it loses focus automatically and the editor disappears.

    I also tried setting the cell to edit through the console and I get the same behaviour (switches to edit and back).



    Any Ideas?

    Some Code

    Code:
    Ext.define('TEST.view.dip.List', {    extend: 'Ext.grid.Panel',
        alias: 'widget.dip_list',
        requires: [
            'Ext.selection.CellModel',
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.util.*',
            'Ext.form.*'
        ],
    
    
        store: 'dip.Tanks',
        disableSelection: true,
        ignoreBorderManagement: true,
    
    
        viewConfig: {
            markDirty: false
        },
    
    
        features: [{
            id: 'locationGroup',
            ftype: 'grouping',
            hideGroupedHeader: true,
            enableGroupingMenu: false,
            collapsible: false,
    
    
            groupHeaderTpl: Ext.create('Ext.XTemplate',
                
                '<span class=ux-header-key>{name}</span> {name:this.getLocationName}',
                {
                    getLocationName: function(shipTo) {
                        var
                        store = Ext.getStore('dip.Locations'),
                        idx = store.find('bpNo', shipTo),
                        loc, locName;
    
    
                        loc = store.getAt(idx);
    
    
                        if (loc) {
                            return loc.data.longName;
                        }
                    }
                }
            )
        }],
    
    
    
    
        initComponent: function() {
            var me = this;
    
    
            me.addEvents(['validateedit']);
    
    
            me.cellEditing = new Ext.grid.plugin.CellEditing({
                clicksToEdit: 1,
                listeners: {
                    beforeedit: {
                        fn: function(editor, e, eOpts){
                            if (e.field === 'dipReading'){
                                return true;
                            }
                            if (!e.record.isEditable){
                                return false;
                            }
                        }
                    },
    
    
                   validateedit: {
                        fn: function(editor, e, eOpts){
                                me.fireEvent('validateedit', editor, e, eOpts);
    
    
                        }
                    },
                    scope: me
                }
            });
    
    
            Ext.apply(this,{
                plugins: [this.cellEditing],
                columns: {
                    
                    
                    
                    defaults: {
                        sortable: false,
                        draggable: false,
                        hideable: false,
                        menuDisabled: true
                    },
                items: [{
                    xtype: 'gridcolumn',
                    dataIndex: 'dipDate',
                    width: 130,
                    
                    isEditable: true,
                    locales: {
                        text: 'dip.column.dipDate',
                        tooltip: 'dip.column.dipDate'
                    },
                    
                    renderer: function(v, meta, rec){
                        if (rec.isEditable){
                            meta.tdCls =  'ux-grid-cell-editable';
                            if (rec.errors.getByField('dipDate').length > 0){
                                        meta.classes.push('ux-grid-cell-invalid');
    
    
                            }
                                return Ext.util.Format.date(v);
                        }
                    },
                    editor: {
                        xtype: 'datefield',
                        width: 130 - TEST.Config.LAYOUT.GRID_EDIT_CELL_MARGIN * 2,
                        format: Ext.Date.defaultFormat,
                        maxValue: Ext.util.Format.date(new Date()),
                        maxText: TEST.LocaleMgr.get('dip.validation.maxDateTime')
                    }
                },{
                    xtype: 'gridcolumn',
                    dataIndex: 'dipTime',
                    
                    width: 120,
                    
                    isEditable: true,
                    locales: {
                        text: 'dip.column.dipTime',
                        tooltip: 'dip.column.dipTime'
                    },
                    
                    renderer: function(v, meta, rec){
                        if (rec.isEditable){
                            meta.tdCls =  'ux-grid-cell-editable';
                            if (rec.errors.getByField('dipTime').length > 0){
                                meta.tdCls +=  ' ux-grid-cell-invalid';
                            }
                            return Ext.util.Format.date(v, Ext.form.field.Time.prototype.format);
                        }
                    },
                    editor: {
                        xtype: 'timefield',
                        width: 120 - TEST.Config.LAYOUT.GRID_EDIT_CELL_MARGIN * 2,
                        format: Ext.form.field.Time.prototype.format,
                        increment: 5
                    }
                },{
                    xtype: 'gridcolumn',
                    dataIndex: 'tankId',
                    width: 82,
                    locales: {
                        text: 'dip.column.tankId',
                        tooltip: 'dip.column.tankId'
                    }
                },{
                    xtype: 'gridcolumn',
                    dataIndex: 'materialId',
                    width: 100,
                    locales: {
                        text: 'dip.column.materialId',
                        tooltip: 'dip.column.materialId'
                    }
                },{
                    xtype: 'gridcolumn',
                    dataIndex: 'materialText',
                    locales: {
                        text: 'dip.column.materialText',
                        tooltip: 'dip.column.materialText'
                    },
                    flex: 1
                },{
                    xtype: 'numbercolumn',
                    dataIndex: 'tankCapacity',
                    align: 'right',
                    width: 100,
                    format: '0,0',
                    locales: {
                        text: 'dip.column.tankCapacity',
                        tooltip: 'dip.column.tankCapacity'
                    }
                },{
                    xtype: 'gridcolumn',
                    dataIndex: 'dipReading',
                    width: 150,
                    
                    isEditable: true,
                    emptyText: 'No reading',
                    locales: {
                        text: 'dip.column.dipReading',
                        tooltip: 'dip.column.dipReading'
                    },
                    align: 'right',
                    renderer: function(v, meta, rec) {
                        meta.tdCls = 'ux-grid-cell-editable';
                        if (rec.errors.getByField('dipReading').length > 0){
                            meta.tdCls += ' ux-grid-cell-invalid';
                        }
    
    
                        if (Ext.String.trim(v).length === 0){
                            return 'No reading';
                        }
                        else{
                            return v;
                        }
    
    
    
    
    
    
                    },
                    editor: {
                        xtype: 'textfield',
                        width: 150 - TEST.Config.LAYOUT.GRID_EDIT_CELL_MARGIN * 2,
                        allowBlank: true,
                        selectOnFocus: true
    
    
                    }
                },{
                    xtype: 'gridcolumn',
                    dataIndex: 'tankUom',
                    width: 70,
                    locales: {
                        text: 'dip.column.tankUomText',
                        tooltip: 'dip.column.tankUomText'
                    }
                }]}
            });
    
    
            me.callParent();
    
    
            me.groupingFeature = this.view.getFeature('locationGroup');
    
    
        }
    
    
    });

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    574
    Answers
    59

    Default

    Problems with focus are not so simple to trace, because when you switch to debugger, browser window loses focus.
    Once I have similar problem (but not exact) - it was caused by refresh after autosync.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •