Advice, help needed with ExtJS 4: grid: cell editing: auto edit feature

Question

I searched ExtJS related questions and didn't found any reference, but if I missed it sorry in advance to making duplicate question.

I would like to ask some assistance on how to make ExtJS 4 grid: cell editing: auto edit feature – what I mean is, I want to enter in cell editing mode when I press a key (for example, by pressing “123” in highlighted cell, text is replaced (if there is any) with “123”). At the moment entering cell editing mode can be done by pressing ENTER or clicking with mouse.

As base I am using Sencha provided example: http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/cell-editing.html

Any tips, pointers would be appreciative.

Thanks in advance! :)

Actually I did solve my problem partially. Found a way to make cell editable on key press, put selectOnFocus config param for text selecting in cell, now I need insert first char (that initiated editing mode) in cell.

It can be not the most beautiful solution, but it work for me :) Here is full code up till now.

var tStore = Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":"Lisa", "email":"[email protected]", "phone":"555-111-1224"},
        {"name":"Bart", "email":"[email protected]", "phone":"555--222-1234"},
        {"name":"Homer", "email":"[email protected]", "phone":"555-222-1244"},
        {"name":"Marge", "email":"[email protected]", "phone":"555-222-1254"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

var tCellEdit = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
});

var tGrid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: tStore,
    columns: [
        {header: 'Name',  dataIndex: 'name', field: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype:'textfield',
                allowBlank:false,
                selectOnFocus: true
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selType: 'cellmodel',
    plugins: [tCellEdit],
    listeners: {
        keypress: {
            element: 'el',
            fn: function(iEvent, iElement) {
                iCode = iEvent.getKey();
                if (iCode != undefined && iCode != iEvent.LEFT && iCode != iEvent.RIGHT && iCode != iEvent.UP && iCode != iEvent.DOWN && iCode != iEvent.ENTER && iCode != iEvent.ESC) {
                    var iView = tGrid.getView();
                    var position = iView.selModel.position;

                    tCellEdit.startEditByPosition(position);
                }
            }
        }
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Answer 1

Sorry for long delay, but lets just say I was on vacation, sitting at the sea and sipping Mojitos… thinking about life, potatoes and what I really need for upcoming project grid wise. I came to conclusion about these points:

1. Because in my grid people will be writing numbers. I need to focus on entering edit mode by pressing numbers in current cell.
2. I need pressed numeric key not only activate edit mode, but insert it as new value (so by pressing 1 on keyboard, cell is entering edit mode and putting 1 as new value)
3. I need to let ESC and ENTER magic work as usual.

Overall I made some overrides to Ext.core.Element (to fix strange bug that appears using IE9 and Firefox 6.0.2 on Windows 7. For more details, please see comments in code.), Ext.grid.plugin.Editing (to enter edit mode by pressing numeric keys) and Ext.Editor (to set new value).

TODO: when in edit mode, pressing ENTER not only complete editing, but move one cell down if there is one (similar to Excel)

PS. Sorry for my English… not really my native language, but hopefully it’s more or less understandable. Also, thanks for input and comments! ;)

/**
* Fix for bug with cursor position in editor grid textfield
*
* Bug description: after loading an editor grid which contains a textfield, the cursor / caret is positioned at the
* beginning of text field the first time the editor is activated. Subsequent activations position the caret at the end
* of the text field.
* In my case this behavior is not observed in Opera 11.51 (Windows 7) and IE8, Firefox 6.0.2 (Windows XP), but observed in IE9 and Firefox 6.0.2 (Windows 7)
*
* Current fix helps with IE9 problem, but Firefox 6.0.2 (Windows 7) still putting the cursor / caret at the beginning of text field.
*
* Forum post for ExtJS v3 about same problem and where the fix was found: http://www.sencha.com/forum/showthread.php?88046-OPEN-3.1-Caret-Cursor-Position-in-Editor-Grid-Textfield
*/
Ext.core.Element.prototype.focus = function(defer, /* private */dom) {
    var me = this,
        dom = dom || me.dom;
    try {
        if (Number(defer)) {
            Ext.defer(me.focus, defer, null, [null, dom]);
        } else {
            dom.focus();
            // start override
            dom.value = dom.value;
            dom.focus();
            if (dom.sof) {
                dom.select();
            }
            // end override
        }
    } catch (e) { }
    return me;
};
/**
* END OF ALL FIXES
*/

var tStore = Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":"Lisa", "email":"[email protected]", "phone":"555-111-1224"},
        {"name":"Bart", "email":"[email protected]", "phone":"555--222-1234"},
        {"name":"Homer", "email":"[email protected]", "phone":"555-222-1244"},
        {"name":"Marge", "email":"[email protected]", "phone":"555-222-1254"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.onReady(function() {

    var newValue = '';

    /**
     *  Rewriting class Ext.grid.pluging.Editing to make cell go into edit mode by pressing numeric keys.
     *
     * changed: requirements: Ext.util.KeyNav -> Ext.util.KeyMap
     * changed: accordingly made changes to use Ext.util.KeyMap in initEditTriggers function
     * added: new function onNumberKey for replacing original value with new one and entering cell in edit mode
     *
     * tested only for Cell selection model, too lazy for Row selection model testing :P
     */
    Ext.override(Ext.grid.plugin.Editing, {

        requires: [
            'Ext.grid.column.Column',
            'Ext.util.KeyMap'
        ],

        initEditTriggers: function() {
            var me = this,
                view = me.view,
                clickEvent = me.clicksToEdit === 1 ? 'click' : 'dblclick';

            // Start editing
            me.mon(view, 'cell' + clickEvent, me.startEditByClick, me);
            view.on('render', function() {
                me.keyNav = Ext.create('Ext.util.KeyMap', view.el, [
                    {
                        key: [48, 49, 50, 51, 52, 53, 54, 55, 56, 57],  // 0123456789
                        fn: me.onNumberKey,
                        scope: me
                    }, {
                        key: 13,    // ENTER
                        fn: me.onEnterKey,
                        scope: me
                    }, {
                        key: 27,    // ESC
                        fn: me.onEscKey,
                        scope: me
                    }
                ]);
            }, me, { single: true });
        },

        onNumberKey: function(e) {
            var me = this,
                grid = me.grid,
                selModel = grid.getSelectionModel(),
                record,
                columnHeader = grid.headerCt.getHeaderAtIndex(0);

            // Calculate editing start position from SelectionModel
            // CellSelectionModel
            if (selModel.getCurrentPosition) {
                pos = selModel.getCurrentPosition();
                record = grid.store.getAt(pos.row);
                columnHeader = grid.headerCt.getHeaderAtIndex(pos.column);
            }
            // RowSelectionModel
            else {
                record = selModel.getLastSelected();
            }

            // if current cell have editor, then save numeric key in global variable
            ed = me.getEditor(record, columnHeader);
            if (ed) {
                newValue = String.fromCharCode(e);
            }

            // start cell edit mode
            me.startEdit(record, columnHeader);
        }
});

    Ext.override(Ext.Editor, {
        startEdit : function(el, value) {
            var me = this,
                field = me.field;

            me.completeEdit();
            me.boundEl = Ext.get(el);
            value = Ext.isDefined(value) ? value : me.boundEl.dom.innerHTML;

            if (!me.rendered) {
                me.render(me.parentEl || document.body);
            }

            if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) {
                me.startValue = value;
                me.show();
                field.reset();
                field.setValue((newValue != '' ? newValue : value));
                me.realign(true);
                field.focus(false, 10);
                if (field.autoSize) {
                    field.autoSize();
                }
                me.editing = true;

                // reset global newValue
                newValue = '';
            }
        }
    });
    /**
     *  END OF ALL OVERRIDES (thank god!) :)
     */


    var tCellEdit = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });

    var tGrid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: tStore,
        columns: [
            {header: 'Name',  dataIndex: 'name',
                editor: {
                    xtype: 'textfield',
                    maskRe: /[\d]/
                }
            },
            {header: 'Email', dataIndex: 'email', flex:1,
                editor: {
                    xtype:'textfield'
                }
            },
            {header: 'Phone', dataIndex: 'phone'}
        ],
        selType: 'cellmodel',
        plugins: [tCellEdit],
        height: 200,
        width: 400,
        renderTo: 'testgrid'
    });
});