Extjs4表格编辑器远程下拉框显示值

Question

我有一个网格，其中一些列需要编辑。其中一列应通过下拉框进行编辑。下拉框存储是远程的，并且是键值对类型：

['id', 'title']

下拉框的valueField为id，displayValue为title。当编辑单元格时，我的下拉框会加载store，选择displayValue并返回valueField到网格编辑器。因此，单元格将填充valueField。

我的问题是：如何使单元格呈现displayValue？只是从store中选择它是不够的，因为渲染在store加载之前发生。目前我的代码（仅适用于本地存储）：

{
    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;
    }
}

- cockedpistol

Answer 1

这是我所做的方法：

我有两个商店，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;
  }

在表格中，我有一个监听器用于编辑事件，以使用下拉框中的标题更新包含标题的列：

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

希望这能帮助其他人！

- cockedpistol

Answer 2

在您的模型定义中，'id'的类型是什么？如果定义为'int'，则需要执行以下操作：

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

- Clean Potato

Answer 3

值不是传递给渲染器的唯一参数，请参阅文档： http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column-cfg-renderer

value : Object

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

A collection of metadata about the current cell; 

can be used or modified by the renderer. Recognized properties are: tdCls, tdAttr, and style.

**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

- dbrin

---

我该如何使用其他参数来更新渲染器？谢谢。 - cockedpistol

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

- Scott Quinlan