Подтвердить что ты не робот

Рекомендации, необходимые для ExtJS 4: grid: редактирование ячеек: функция автоматического редактирования

Я искал вопросы, связанные с ExtJS, и не нашел ссылок, но если я пропустил это, извините заранее, чтобы задать дублирующий вопрос.

Я хотел бы попросить некоторую помощь о том, как сделать сетку ExtJS 4: редактирование ячеек: функция автоматического редактирования - то, что я имею в виду, я хочу войти в режим редактирования ячейки, когда я нажимаю клавишу (например, 123 "в выделенной ячейке, текст заменяется (если есть) с" 123 "). В настоящий момент вход в режим редактирования ячейки можно сделать, нажав ENTER или щелкнув мышью.

В качестве базы я использую пример Sencha: http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/cell-editing.html

Любые советы, указатели будут благодарны.

Спасибо заранее!:)

На самом деле я частично решил проблему. Нашел способ сделать редактирование ячейки нажатием клавиши, поместить параметр selectOnFocus для выбора текста в ячейке, теперь мне нужно сначала вставить char (который инициировал режим редактирования) в ячейке.

Это может быть не самое красивое решение, но оно работает для меня:) Вот полный код до сих пор.

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()
});
4b9b3361

ОТВЕТЫ

Ответ 1

Извините за долгую задержку, но просто скажу, что я был в отпуске, сидел у моря и потягивал Мохитос... думая о жизни, картофеле и о том, что мне действительно нужно для грядущей сетки проекта. Я пришел к выводу об этих моментах:

  • Потому что в моей сетке люди будут писать цифры. Мне нужно сосредоточиться на входе в режим редактирования, нажав цифры в текущей ячейке.
  • Мне нужна нажатая цифровая клавиша не только активирует режим редактирования, но вставляет ее как новое значение (поэтому, нажав 1 на клавиатуре, ячейка переходит в режим редактирования и ставит 1 как новое значение)
  • Мне нужно, чтобы клавиши ESC и ENTER работали как обычно.

В целом я сделал некоторые переопределения Ext.core.Element(чтобы исправить странную ошибку, которая появляется с использованием IE9 и Firefox 6.0.2 в Windows 7. Для получения дополнительной информации см. комментарии в коде.), Ext.grid.plugin. Редактирование (для входа в режим редактирования с помощью цифровых клавиш) и Ext.Editor(для установки нового значения).

TODO: в режиме редактирования нажатие ENTER не только завершает редактирование, но и перемещает одну ячейку вниз, если она есть (аналогично Excel)

PS. Извините за мой английский... не совсем мой родной язык, но, надеюсь, его более-менее понятно. Кроме того, спасибо за ввод и комментарии!;)

/**
* 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]m", "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'
    });
});