4

ExtJS 4を使用して、ユーザーが数字の長いリストを入力するグリッドを作成したいと思います。ユーザーが「Enter」を押して1つのセルの編集を終了し、自動的に下のセルに移動して編集を開始できるようにしたいと思います。

Ext.grid.plugin.CellEditingは編集の目的ではうまく機能しているようですが、keyUpイベントを検出して処理する方法が見つかりません。

このコードで「edit」イベントを使用して問題にアプローチしてみました。

selType: 'cellmodel',
plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1,
        listeners: {
            edit: function (editor, e, eOpts) {
                // If the event is fired by pressing "Enter", the column and row associated with event will
                // be the same as the currently selected row and column

                if (e.grid.selModel.position.column == e.colIdx && e.grid.selModel.position.row == e.rowIdx){

                    // Check if we are in the final row
                    if (e.rowIdx+1 == e.grid.getStore().getTotalCount()){
                        return true;
                    }

                    editor.startEditByPosition({row: e.rowIdx+1, column: e.colIdx});
                    return false;
                }
            }
        }
    })
],

このアプローチの問題は、ユーザーがセルの編集を開始し、グリッドの外側のGUI要素をクリックした場合、編集イベントがこれを「Enter」キーが押されていることと区別しないことです。これは修正できますか？

おそらく、代わりにカスタムのSelectionModelを実装しようとすべきでしょうか？そのアプローチからどのように始めますか？

4

2 に答える 2

6

このようなもの???
編集するときは、 、 、および を使用してtabみshift + tabてenterくださいshift + enter

私がしたことは、celleditingandをオーバーライドすることですselection.rowmodel

実際、私はあなたと同様の質問をしました。と@Lionel Chanは私がそれを解決するのを手伝ってくれます.
上記の私の解決策は彼の考えに基づいています。

注 : Extjs 4.0.7 でのみ動作します

編集（私のjsfiddleが壊れている場合、ここにオーバーライドがあります） 

Ext.override(Ext.grid.plugin.CellEditing,{
    onSpecialKey: function(ed, field, e) {
        var grid = this.grid,sm;
        if (e.getKey() === e.TAB) {
            e.stopEvent();
            sm = grid.getSelectionModel();
            if (sm.onEditorTab)sm.onEditorTab(this, e);
        }else if(e.getKey() === e.ENTER){
            e.stopEvent();
            sm = grid.getSelectionModel();
            if (sm.onEditorEnter)sm.onEditorEnter(this, e);
        }
    }
});

Ext.override(Ext.selection.RowModel, {
    lastId:null,
    onEditorTab: function(ep, e) {
        var me = this,
            view = me.view,
            record = ep.getActiveRecord(),
            header = ep.getActiveColumn(),
            position = view.getPosition(record, header),
            direction = e.shiftKey ? 'left' : 'right',
            newPosition = view.walkCells(position, direction, e, false),
            newId=newPosition.row,
            grid=view.up('gridpanel');

        if (me.lastId!=newId && me.lastId!=null){
            deltaX = me.lastId<newId? -Infinity : Infinity;
            header=grid.headerCt.getHeaderAtIndex(newPosition.column);
            if(header){
                while(!header.getEditor()){
                    newPosition= view.walkCells(newPosition,direction, e, false);
                    header=grid.headerCt.getHeaderAtIndex(newPosition.column);
                }
            }
        }else{
            deltaX = ep.context.column.width * (direction== 'right' ? 1 : -1);
        }
        grid.scrollByDeltaX(deltaX);
        me.lastId=newPosition.row;
        Ext.defer(function(){
            if (newPosition)ep.startEditByPosition(newPosition);
            else ep.completeEdit();
        }, 100);
    },
    onEditorEnter:function(ep,e){
        var me = this,
            view = me.view,
            record = ep.getActiveRecord(),
            header = ep.getActiveColumn(),
            position = view.getPosition(record, header),
            direction = e.shiftKey ? 'up' : 'down',
            newPosition = view.walkCells(position, direction, e, false),
            newId=newPosition.row,
            grid=view.up('gridpanel');

        deltaY=20 * (direction== 'down' ? 1 : -1);
        grid.scrollByDeltaY(deltaY);
        me.lastId=newPosition.row;
        Ext.defer(function(){
            if (newPosition)ep.startEditByPosition(newPosition);
            else ep.completeEdit();
        }, 100);
    }
});
于 2012-04-17T05:20:00.210 に答える
1

「Warung Nasi 49 」の提案から始めて、私はこのオーバーライドを書きました:

Ext.define('Override.Ext.grid.plugin.CellEditing',
{
    override: 'Ext.grid.plugin.CellEditing',
    onSpecialKey: function (ed, field, e) {
        var grid = this.grid,
            nbCols = grid.columns.length - 1, //start from 0
            nbRows = grid.getStore().getTotalCount() - 1, //start from 0
            currentCol = this.context.colIdx,
            currentRow = this.context.rowIdx;

        //forward
        if (!e.shiftKey && (e.getKey() === e.ENTER || e.getKey() === e.TAB)) {
            e.stopEvent();

            //Detect next editable cell
            do {
                if (this.startEdit(currentRow, currentCol + 1))
                    break;
                else {
                    currentCol++;
                    if (currentCol >= nbCols) {
                        currentRow++;
                        currentCol = -1;
                    }
                }
            } while (currentRow <= nbRows);
        }
        //backward
        if (e.shiftKey && (e.getKey() === e.ENTER || e.getKey() === e.TAB)) {
            e.stopEvent();

            //Detect previous editable cell
            do {
                if (this.startEdit(currentRow, currentCol - 1))
                    break;
                else {
                    currentCol--;
                    if (currentCol < 0) {
                        currentRow--;
                        currentCol = nbCols+1;
                    }
                }
            } while (currentRow >=0);
        }
    }
},
null);

このオーバーライドにより、TAB と ENTER の両方のナビゲーションが可能になります (SHIFT による前方/後方)。

行の最後のセルに到達すると、次の行の最初の編集可能なセルがフォーカスされます。

于 2014-11-22T10:58:53.620 に答える