Extjs4グリッドエディタリモートコンボボックスdisplayValue

Question

私はいくつかの列を編集するグリッドを持っています。コンボボックスを使用して列の1つを編集する必要があります。コンボボックスストアがリモートであり、キー値ペアのタイプのものである：

['id', 'title'] 

コンボボックスvalueFieldは、IDとdisplayValueのタイトルです。コンボボックスがセルを編集すると、ストアがロードされ、displayValueが選択され、valueFieldがグリッドエディタに返されます。したがって、セルはvalueFieldで埋められます。

私の質問は、どのようにしてdisplayValueをレンダリングするのですか？ストアからロードする前にレンダリングが行われるため、ストアから選択するだけでは十分ではありません。 （唯一の地元の小売店で動作します）今の私のコード：

{ 
    header: 'Column title', 
    dataIndex: 'id', 
    displayField: 'title', 
    editor: { 
     xtype: 'combo', 
     valueField: 'id', 
     store: 'myStore', 
     displayField: 'title' 
    }, 
    renderer: function(value) { 
     //How do I find the editors combobox store? 
     store = new myStore(); 
     index = store.findExact('id', value); 
     if (index != -1) { 
      rs = store.getAt(index).data; 
      return rs.title; 
     } 
     return value; 
    } 
} 

Answer 1

これは、私はそれをした方法である：

I 2店舗、選択される値のためのグリッドとstoreb操作のためstoreAを（上記のように）を有します。どちらの店もstoreBのIDを持っています。

storeAにフィールドを追加しました。これはstoreB IDのタイトルです。グリッドでは、このタイトルは非表示の列として表示されます。そして、私はこのレンダラーを使用してコンボボックスエディタの列に：グリッド上の

renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { 
     //Title is the title for the storeB ID 
     return store.data.items[rowIndex].data.title; 
    } 

私は、コンボボックスからタイトルとタイトルを含む列を更新するには、[編集]イベントのリスナーを持っている：

grid.on('edit', function(editor, e, eOpts) { 
     grid.store.data.items[e.rowIdx].set('title', editor.editors.items[0].field.rawValue) 
    }) 

これが他の人に役立つことを願っています

Answer 2

値はレンダラに渡されたパラメータだけではないのドキュメントを参照してください。 http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column-cfg-renderer

値：オブジェクト

The data value for the current cell 
**metaData** : Object 

A collection of metadata about the current cell; 

は、レンダラによって使用または変更できます。認識されるプロパティは、tdCls、tdAttr、 およびスタイルです。

**record** : Ext.data.Model 

The record for the current row 
**rowIndex** : Number 

The index of the current row 
**colIndex** : Number 

The index of the current column 
**store** : Ext.data.Store 

The data store 
**view** : Ext.view.View 

The current view 

Answer 3

モデル定義では、「id」のタイプは何ですか？

index = store.findExact('id', parseInt(value)); 

Answer 4

ここで答えはだ、あなたのレンダラーのスコープにコンボストアを持参：

http://jsfiddle.net/WRXcw/3/

Ext.define('GridModel', { 
    extend: 'Ext.data.Model', 
    fields: [{ 
     name: 'id', 
     type: 'int' 
    },{ 
     name: 'type_id', 
     type: 'int' 
    }] 
}); 

Ext.define('ComboModel', { 
    extend: 'Ext.data.Model', 
    fields: [{ 
     name: 'id', 
     type: 'int' 
    },{ 
     name: 'label', 
     type: 'string' 
    }], 
    statics: { 
     TYPE_OPTION_ONE: 1, 
     TYPE_OPTION_TWO: 2, 
     TYPE_OPTION_THREE: 3, 
     TYPE_OPTION_FOUR: 4 
    } 
}); 

var comboStore = Ext.create('Ext.data.Store', { 
    model: 'ComboModel', 
    data: [{ 
     id: 1, 
     label: '1st Option' 
    },{ 
     id: 2, 
     label: '2nd Option' 
    },{ 
     id: 3, 
     label: '3rd Option' 
    }] 
}); 

var gridStore = Ext.create('Ext.data.Store', { 
    model: 'GridModel', 
    data: [{ 
     id: 1, 
     type_id: ComboModel.TYPE_OPTION_ONE 
    },{ 
     id: 2, 
     type_id: ComboModel.TYPE_OPTION_TWO 
    },{ 
     id: 3, 
     type_id: ComboModel.TYPE_OPTION_THREE 
    },{ 
     id: 4, 
     type_id: ComboModel.TYPE_OPTION_TWO 
    }] 
}); 

Ext.widget('grid', { 
    title: 'Rendering Combos', 
    width: 650, 
    height: 500, 
    renderTo: 'ct', 
    plugins: [ 
     Ext.create('Ext.grid.plugin.CellEditing', { 
      clicksToEdit: 1 
     }) 
    ], 
    store: gridStore, 
    forceFit: true, 
    columns: [{ 
     dataIndex: 'id', 
     header: 'ID' 
    },{ 
     dataIndex: 'type_id', 
     header: 'Type', 
     editor: { 
      xtype: 'combobox', 
      displayField: 'label', 
      valueField: 'id', 
      queryMode: 'local', 
      store: comboStore, 
      allowBlank: true 
     }, 
     renderer: function(value) { 
      var rec = comboStore.getById(value); 

      if (rec) 
      { 
       return rec.get('label'); 
      } 

      return '—'; 
     } 
    }] 
});