Extjs4網格編輯器遠程組合框顯示值

Question

我有一些網格需要編輯一些列。其中一列應通過組合框進行編輯。組合框商店是遠程和是一個關鍵值對類型：

['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

這是我如何做到了：

我有2個存儲storeA網格和storeB該值將被選擇（如上所述）。兩家商店都有一個來自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; 
    } 

在網格我對編輯事件偵聽器來更新包含的標題從ComboBox標題欄：

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 '—'; 
     } 
    }] 
});