dojo - グリッド内のテキストボックスウィジェットを機能させる方法は？

Question

フォーマッターを使用して、グリッドセル内にテキストボックスウィジェットを配置しました。ただし、カーソルを移動したり、テキストボックス内のテキストを選択したりすることはできません。

例： http： //jsfiddle.net/g33m9/69/

誰かがこれを修正する方法を知っていますか？

ありがとう

Answer 1

グリッドコンポーネントがキーが押されたイベントを処理する方法を認識できるように、列を「編集可能」に設定する必要があります。したがって、レイアウトの変更が必要です

から

var layout = [[
        {name: 'Column 1', field: 'col1'},
        {name: 'Column 2', field: 'col2', width:'200px', formatter: func}
    ]]; 

に

var layout = [[
        {name: 'Column 1', field: 'col1'},
        {name: 'Column 2', field: 'col2', width:'200px', formatter: func, editable: true}
    ]]; 

状態の編集はダブルクリックでアクティブになります。

ここで、OPは、それが完全に肥大化したウィジェットであり、編集可能な状態でポップアップすることを望んでいます。これを任意の数の行/列でスケールアップできるようにするには、これを編集状態に制限します。これにより、値にはテキストが表示されますが、ダブルクリックするとFilteringSelectがポップされます。同じ原則がdijitウィジェットValidationTextBoxにも当てはまります。

現在（1.7.2）可能なセルタイプは次のとおりです。dojox.grid.cells.Booldojox.grid.cells.ComboBox dojox.grid.cells.DateTextBox dojox.grid.cells.Select

私をキャッチSEO：

カスタムdojox.gridcellTypeウィジェットの例-セミプログラマティック

最初のステップ-データを作成する

var i = 0,
data = {
    identifier: 'id',
    items: [
      { id: i, value: 'val'+i++},
      { id: i, value: 'val'+i++},
      { id: i, value: 'val'+i++},
      { id: i, value: 'val'+i++}
    ]
},
// The item label which holds visible value and which holds the value to represent
searchAttr = 'value',
valueAttr = data.identifier,
// The store to use for select widget
store = new dojo.data.ItemFileReadStore({ data: data }),
// And the options, reassembling the valid options we will present in dropdown
// Used when cellType is dojox.grid.cells.Select to name the allowable options
options = [];
dojo.forEach(data.items, function(it) { options.push(it[searchAttr])});

トリッキーな部分-cellTypeを定義する

既存dojox.grid.cells.Cellのものを拡張してみましょう。これには、edit-state-formatterとdefault-formatterの2つの主要な機能があります。デフォルトは問題なく機能します。最後になりましたが、セルが独自の定義を処理できるようにしながら、「_finish」関数をオーバーライドします。

var whenIdle = function( /*inContext, inMethod, args ...*/ ) {
    setTimeout(dojo.hitch.apply(dojo, arguments), 0);
};

var FilteringSelectCell = declare("dojox.grid.cells.FilteringSelect", [dojox.grid.cells.Cell], {
    options: null,
    values: null,

    _destroyOnRemove: true,
    constructor: function(inCell){
        this.values = this.values || this.options;
    },

    selectMarkupFactory: function(cellData, rowIndex) {
        var h = ['<select data-dojo-type="dijit.form.FilteringSelect" id="deleteme' + rowIndex + '" name="foo">'];
        for (var i = 0, o, v;
        ((o = this.options[i]) !== undefined) && ((v = this.values[i]) !== undefined); i++) {
            v = v.replace ? v.replace(/&/g, '&amp;').replace(/</g, '&lt;') : v;
            o = o.replace ? o.replace(/&/g, '&amp;').replace(/</g, '&lt;') : o;
            h.push("<option", (cellData == v ? ' selected' : ''), ' value="' + v + '"', ">", o, "</option>");
        }
        h.push('</select>');
        return h;
    },
    textMarkupFactory: function(cellData, rowIndex) {
        return ['<input class="dojoxGridInput" id="deleteme' + rowIndex + '" data-dojo-type="dijit.form.ValidationTextBox" type="text" value="' + cellData + '">']

    },
    // @override
    formatEditing: function(cellData, rowIndex) {

        this.needFormatNode(cellData, rowIndex);
        var h = (cellData == "W1")
            ? this.textMarkupFactory(cellData, rowIndex)
            : this.selectMarkupFactory(cellData, rowIndex);
        // a slight hack here, i had no time to figure out when the html would actually be inserted to the '<td>' so.. Use 'debugger' statement and track function to hook into
        whenIdle(function() {
            dojo.parser.parse(dojo.byId('deleteme' + rowIndex).parentNode);
            var w = dijit.byId('deleteme' + rowIndex);
            w.focus()

        });
        return h.join('');
    },
    // clean up avoiding multiple widget definitions 'hanging'
    _finish: function(inRowIndex) {
        this.inherited(arguments)
        dijit.byId('deleteme' + inRowIndex).destroy();
    },
    // needed to read the value properly, will work with either variant
    getValue: function(rowIndex) {
        var n = this.getEditNode(rowIndex);
        n = dijit.getEnclosingWidget(n);
        return n.get("value");
    }
});

最後に、新しいレイアウト

var layout = [[
      { name: 'Column 1', field: 'col1' },
      { name: 'Column 2', field: 'col2', 
        cellType: FilteringSelectCell, options: options, editable: true
      }
]];

ここでサンプルを実行しています http://jsfiddle.net/dgbxw/1/