Extjs4コンボボックスディスプレイのグリッド内の値

Question

助けてください。 私はdisplayValueをグリッドに表示したいと思います。 私は解答hereを見つけましたが、どのように使用するのか分かりません。私のコード：

columns:[...,{ 
    header: 'Product', 
    id: 'combo', 
    locked: true, 
    dataIndex: 'prod_id', 
    editor: { 
     xtype: 'combobox', 
     store: new Ext.data.Store({ 
      fields: ['value','display'], 
      data: prod_list 
    }), 
    displayField: 'display', 
    valueField: 'value' 
    } 
},...] 

ソリューション

Ext.util.Format.comboRenderer = function(combo){ 
    return function(value){ 
    var record = combo.findRecord(combo.valueField || combo.displayField, value); 
     return record ? record.get(combo.displayField) : combo.valueNotFoundText; 
    } 
} 

{ 
    header: 'Товар', 
    id: 'combo', 
    locked: true, 
    dataIndex: 'prod_id', 
    editor: MyEditor, 
    renderer: Ext.util.Format.comboRenderer(MyEditor) 
} 

私は列配列の外側のエディタを定義しようとしました。

var MyEditor = new Ext.form.field.ComboBox({ 
     store: new Ext.data.Store({ 
      fields: ['value','display'], 
      data: prod_list 
     }), 
     displayField: 'display', 
     valueField: 'value' 
    }); 

そして、すべて、罰金ですが、私はそれを編集することはできません。何が問題ですか？

私の英語のために申し訳ありません。

Answer 1

var myStore = new Ext.data.Store({ 
    fields: ['value','display'], 
    data: prod_list 
}); 

...

  editor: { 
       xtype: 'combobox', 
       store: myStore, 
       displayField: 'display', 
       valueField: 'value' 
      }, 
      renderer: function(val){ 
       index = myStore.findExact('value',val); 
       if (index != -1){ 
        rs = myStore.getAt(index).data; 
        return rs.display; 
       } 
      } 

Answer 2

あなたはcellEditorをプラグインが表示されません。

レンダラを再利用可能なオブジェクトとして定義して、コンボ列の動作をグローバルに制御できるようにするのが最適です。

ExtJS4を使用しているので、列の範囲外でエディタを定義することなく、コンボエディタのdisplayFieldをセルに表示する別の方法を追加しました。

plugins: [ 
    { 
     ptype: 'cellediting', 
     clicksToEdit: 1 
    } 
    ] 

そして最後に、このようなあなたの列のレンダラープロパティにComboRendererを割り当てる：

Ext.ns("Ext.ux.util"); 

Ext.ux.util.ComboRenderer = function(val, metaData){ 
    var combo = metaData.column.getEditor(); 
    if(val && combo && combo.store && combo.displayField){ 
     var index = combo.store.findExact(combo.valueField, val); 
     if(index >= 0){ 
      return combo.store.getAt(index).get(combo.displayField); 
     } 
    } 
    return val; 
}; 

は、その後、あなたのグリッドcelleditingプラグインを与える：

まず、レンダラーを定義します。

{ 
    header: 'Product', 
    dataIndex: 'prod_id', 
    renderer: Ext.ux.util.ComboRenderer, 
    editor: { 
    xtype: 'combo', 
    store: new Ext.data.Store({ 
     fields: ['value','display'], 
     data: prod_list 
    }) 
    } 
}