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