0

TABキーを dGrid でナビゲートしようとしています。Dgrid set focus on cellで見つかったソリューションをベースとして使用しましたが、これまで解決できなかった問題がいくつかあります。

以下に、私が現在使用しているブロックを示します。すべての列にエディターがあるわけではないため、var を追加したため、right. SHIFT+TABまた、後方ナビゲーションを可能にするためのサポートも追加しました。MT4.prje.grids[gridId]dGrid インスタンスです。ページに色々あるかもしれません。

グリッドはで作成されます

MT4.prje.grids[gridId] = new (declare([OnDemandGrid, Keyboard, Selection, CellSelection]))(gridInfo, gridId);

wheregridInfoには列定義とストアがあります。ストアは次のように作成されます。

new Observable(new Memory({'data': {}, 'idProperty': 'id'}));

エディターは通常TextBox、NumberTextBoxおよびSelectdijit ウィジェットであり、すべて自動保存に設定されています。

aspect.after(MT4.prje.grids[gridId], "edit", function (promise, cellNode) {
    if (promise === null) return;

    promise.then(function (widget) {
        if (!widget._editorKeypressHandle) {
            widget._editorKeypressHandle = on(widget, "keypress", function (e) {

                for (var rowId in MT4.prje.grids[gridId].selection) {
                    break;
                }
                for (var columnId in MT4.prje.grids[gridId].selection[rowId]) {
                    break;
                }

                if (e.charOrCode == keys.TAB) {
                    e.preventDefault();

                    var cellToEdit = null,
                        cellEdited = MT4.prje.grids[gridId].cell(rowId, columnId);

                    if (e.shiftKey) {
                        if (cellEdited.column.previousEditor === undefined) {
                            rowId = parseInt(rowId) - 1;
                            if (MT4.prje.grids[gridId].row(rowId).element !== null) {
                                for (var lastColumnId in MT4.prje.grids[gridId].columns) {}
                                cellToEdit = MT4.prje.grids[gridId].cell(rowId, lastColumnId);
                            }
                        } else {
                            cellToEdit = MT4.prje.grids[gridId].cell(rowId, cellEdited.column.previousEditor);
                        }
                    } else {
                        if (cellEdited.column.nextEditor === undefined) {
                            var firstColumnId = null;
                            rowId = parseInt(rowId) + 1;
                            if (MT4.prje.grids[gridId].row(rowId).element === null) {
                                var fields = {};
                                for (var cId in MT4.prje.grids[gridId].columns) {
                                    if ((cId != 'excluir') && (firstColumnId === null)) {
                                        firstColumnId = cId;
                                    }
                                    fields[cId] = '';
                                }
                                MT4.prje.addRowToGrid(gridId, fields);
                            } else {
                                for (var cId in MT4.prje.grids[gridId].columns) {
                                    if (cId != 'excluir') {
                                        firstColumnId = cId;
                                        break;
                                    }
                                }
                            }

                            cellToEdit = MT4.prje.grids[gridId].cell(rowId, firstColumnId);
                        } else {
                            cellToEdit = MT4.prje.grids[gridId].cell(rowId, cellEdited.column.nextEditor);
                        }
                    }

                    if (cellToEdit) {
                        MT4.prje.grids[gridId].deselect(cellEdited);
                        MT4.prje.grids[gridId].select(cellToEdit);
                        MT4.prje.grids[gridId].edit(cellToEdit);

                    }
                }
            });
        }
    });
});

改行部分を無視しても、いくつかのエラーが発生します。まず第一に、エディターはかろうじて存在し、選択と一緒に消えます。空の列にタブで移動すると、エディターに前のエディターの値が入力されることがあります。より一貫して行う方法はありますか？

私が考えているのは、sharedEditor で競合状態が発生していることです (それらは に設定されていますeditOn: focus)。dojo.on('blur') で deselect/select をラップして出力しようとしました。dijit/form/Selectしかし、それはウィジェットで一貫して正しくなるわけではありません。それを呼び出すことができるより良いイベントはありますか？

また、最終ブロックを次のように変更してみました。

if (cellToEdit) {
    on(cellToEdit.element, 'focus', function(){
        MT4.prje.grids[gridId].select(cellToEdit);
    });

    on(cellEdited.element, 'blur', function(){
        MT4.prje.grids[gridId].deselect(cellEdited);
        on.emit(cellToEdit.element, 'focus', {'bubble': true, 'cancelable': false});
    });

    on.emit(cellEdited.element, 'blur', {'bubble': true, 'cancelable': false});
}

しかし、それは2つのエラーを出します:

  1. セルに変更を加えると、次のエディターに移動しません。それを選択さえしません。
  2. 空のセルから別の空のセルに初めて移動するときも機能しません。

誰でもアイデアはありますか？

4

1 に答える 1

0

この修正は、dgrid 0.3.11 で機能します。

dgrid の postCreate に追加します。

postCreate: function() {
    var that = this;
    this.inherited(arguments);

    this.on('dgrid-datachange', function(evt) {
        that._selectedCell = that.cell(evt);
    });

    aspect.after(this, 'save', function(dfd) {
        dfd.then(function() {
            var nextCell = that.right(that.cell(that._selectedCell.row.id, that._selectedCell.column.id));
            that.edit(nextCell);
            // Bonus Fix. Workaround dgrid bug that blocks field text to be selected on focus.
            nextCell.element.widget && nextCell.element.widget.textbox && nextCell.element.widget.textbox.select();
        });
    });
}
于 2013-10-26T13:18:58.543 に答える