如何在网格中以程序方式设置列的编辑器

Question

我有一个带有一组列的 Ext.grid.Panel。这个网格被过滤，根据过滤器，我想为某一列定义一个编辑器。

我的表格：

Ext.define('Mb.view.MyPanel', {
    extend: 'Ext.grid.Panel',
    columns: [
        {text: 'Order #', dataIndex: 'id'},
        {text: 'Action', dataIndex: 'type',
            renderer: function(value){
                if(value == 'BP') return Lang._('Veuillez choisir')
                 return ''
            }
        },

现在我想做的是：

var panel = Mb.app.getView('MyPanel');
if (condition == true) {
    panel.getColumns[1].setEditor({
        xtype: 'textfield',
        ...
    })
}

很明显，方法getColumns和setEditor不存在。因此，我需要另一种方法来激活该列上的编辑器。
我没有找到访问列定义以修改它们并重新渲染网格的方法。

你能给我一个方向提示吗？谢谢。

- Lorenz Meyer

Answer 1

请参考Ext.grid.column.Column上getEditor()的文档。如果您使用编辑插件，则插件提供getEditor()和setEditor()的实现。根据正在编辑的列和您实现的任何自定义逻辑，您可以实现自定义的getEditor()方法来根据情况返回任何编辑器实例。请注意保留HTML标记。

getEditor( record, defaultField ) : Ext.form.field.Field

这只是真相的一小部分。

• getEditor 不仅是 Ext.grid.column.Column 的一个方法，还是一个配置选项。
• 如果将 getEditor 定义为配置选项，则函数会作为 getEditor( record ) 被调用，需要返回一个 Ext.grid.CellEditor。
• 这将适用于单元格编辑插件，但不适用于行编辑插件。

下面是一个列配置示例。它将仅在选择的行上创建下拉框：

columns: [{
    text: 'Action', dataIndex: 'action', 
    getEditor: function(record){
        if( my logic ){
            return Ext.create('Ext.grid.CellEditor', {
                field: Ext.create( 'Ext.form.field.ComboBox', {
                    forceSelection: true,
                    store: [[1, 'Option 1'], [2, 'Option 2']]
                })
            })
        } else return false;
    }
},

- existdissolve

---

我想我明白了：我编写一个 getEditor(record) 并返回行中喜欢的字段。但是我需要在哪里定义它？作为列的配置选项吗？这也意味着可以基于行使用不同的编辑器，对吗？ - Lorenz Meyer

另一方面，当我想使用列的setEditor方法时，我需要引用该列，但我不知道如何从网格对象中获取它。 - Lorenz Meyer

是的，你只需要在列定义中定义“getEditor()”。请查看此示例fiddle：https://fiddle.sencha.com/#fiddle/2d - existdissolve

当然，很高兴能够帮到你！ - existdissolve

这个文档非常缺乏说明。我编辑了你的答案，加入了你的示例。 - Lorenz Meyer