ExtJS 4，不同的行字段答案

【问题标题】：ExtJS 4, Different rows fieldsExtJS 4，不同的行字段
【发布时间】：2012-09-24 20:23:50
【问题描述】：

是否可以在 Grid 中定义“逐行”列？

例如，我需要这样的网格：

 id  |   name    |      options
======================================
int  |  string   |  combobox(1,2,3)
int  |  string   |  combobox(1,2,3,4,5)
int  |  string   |  combobox(1,2,3)
int  |  string   |  combobox(5,6,7)

组合框的可能值是在初始化时为该列定义的...有没有办法定义每行的值，或者在渲染之后定义一些方法？

【问题讨论】：

参考：Ext.grid.column.Column#renderer
mmmm...也许我可以用渲染器解决这个问题。我仍然想知道是否有另一种解决方案，也许渲染器是用来装饰的？ - 编辑：不仅仅是 HTML 装饰，我已经检查过，有一些强大的参数可以传递给回调。我想我们明白了，谢谢 Yoshi ;)
您还可以查看editor-config 的列。也许这更适合您的需求
坏消息...无法使用任何属性（编辑器或渲染器）来实现此目的... :(

标签： javascript gridview extjs4.1

【解决方案1】：

这里有几个选项。但首先要确定为什么首先需要在网格中使用组合框。需要吗

1) 一个标准的单元格编辑器插件，当您在单元格内单击时会被激活，或者

2) 您是否需要使用始终在每一行中激活的组合框来呈现您的单元格？

如果您的答案是 1)，那么您需要做 2 件事： a) 覆盖默认的 CellEditing 插件以允许在每一行上使用不同的组合框。默认实现每列缓存一次编辑器配置。 b) 提供一个函数，在为您的单元格调用 getEditor() 时返回编辑器配置。

我将在下面提供这些代码。

如果您对原始问题回答 2)，那么您需要一个自定义组件，该组件将在您的单元格中呈现一个组合框。这样的野兽有两种实现，我用的一种是Skirtleshttp://skirtlesden.com/ux/component-column另一种叫做Its column component http://www.sencha.com/forum/showthread.php?174504-Its.grid.column.Component

附录：

选项 1) 的代码

列配置 -

{  text: 'My Combo Column',
   datIndex: 'someStoreField',
   getEditor:function(record){
       console.log('in get editor');
       return myFunctionToDetermineEditorConfig(record);
   }
}

CellEditor 覆盖。 'this' 是对 Grid 的引用

this.plugins = [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit:1,
            //override original to allow for multiple editors in a column
            getEditor:function (record, column) {
                    var editor = column.getEditor(record);
                    if (!editor) {
                        return false;
                    }
                    if (!(editor instanceof Ext.grid.CellEditor)) {
                        editor = new Ext.grid.CellEditor({
                            //editorId:editorId,
                            field:editor,
                            ownerCt:this.grid
                        });
                    } else {
                        editor.ownerCt = this.grid;
                    }
                    editor.editingPlugin = this;
                    editor.isForTree = this.grid.isTree;
                    editor.on({
                        scope:this,
                        specialkey:this.onSpecialKey,
                        complete:this.onEditComplete,
                        canceledit:this.cancelEdit
                    });
                    return editor;
                }
        })
    ];

【讨论】：