1

グリッドで「行ごと」の列を定義することは可能ですか?

たとえば、次のようなグリッドが必要です。

 id  |   name    |      options
======================================
int  |  string   |  combobox(1,2,3)
int  |  string   |  combobox(1,2,3,4,5)
int  |  string   |  combobox(1,2,3)
int  |  string   |  combobox(5,6,7)

コンボボックスの可能な値は、初期化でその列に対して定義されます...行ごとに定義する方法、またはレンダリング後に定義する方法はありますか?

4

1 に答える 1

3

ここにはいくつかのオプションがあります。ただし、最初に、グリッドにコンボボックスが必要な理由を最初に決定します。必要ですか

1）セル内をクリックするとアクティブになる標準のセルエディタプラグイン、または

2）すべての行で常にアクティブ化されたコンボボックスでセルをレンダリングする必要がありますか？

答えが1）の場合、次の2つのことを行う必要があります。a）デフォルトのCellEditingプラグインをオーバーライドして、各行で異なるコンボボックスを許可します。デフォルトの実装では、エディター構成が列ごとに1回キャッシュされます。b）セルに対してgetEditor（）が呼び出されたときに、エディター構成を返す関数を提供します。

これらのコードを以下に示します。

元の質問に2）と答えた場合は、セルにコンボボックスをレンダリングするカスタムコンポーネントが必要です。このような獣には2つの実装があります。1つはSkirtleshttp : //skirtlesden.com/ux/component-columnで、もう1つはその列コンポーネント http://www.sencha.com/forum/showthread.phpと呼ばれます。 ？174504-Its.grid.column.Component

付録：

オプション1のコード）

列構成-

{  text: 'My Combo Column',
   datIndex: 'someStoreField',
   getEditor:function(record){
       console.log('in get editor');
       return myFunctionToDetermineEditorConfig(record);
   }
}

CellEditorのオーバーライド。「これ」はグリッドへの参照です

this.plugins = [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit:1,
            //override original to allow for multiple editors in a column
            getEditor:function (record, column) {
                    var editor = column.getEditor(record);
                    if (!editor) {
                        return false;
                    }
                    if (!(editor instanceof Ext.grid.CellEditor)) {
                        editor = new Ext.grid.CellEditor({
                            //editorId:editorId,
                            field:editor,
                            ownerCt:this.grid
                        });
                    } else {
                        editor.ownerCt = this.grid;
                    }
                    editor.editingPlugin = this;
                    editor.isForTree = this.grid.isTree;
                    editor.on({
                        scope:this,
                        specialkey:this.onSpecialKey,
                        complete:this.onEditComplete,
                        canceledit:this.cancelEdit
                    });
                    return editor;
                }
        })
    ];
于 2012-09-25T23:13:33.793 に答える