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

在网格上我有一个edit事件的监听器来更新包含带有组合框标题的标题的列：

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

希望这有助于其他人！

Answer 2

在您的模型定义中，'id'的类型是什么。如果定义为'int'，则必须：

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

Answer 3

值不是传递给渲染器的唯一参数，请参阅docs： 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 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 '&mdash;';
        }
    }]
});

Extjs4网格编辑器远程组合框displayValue

4 个答案: