javascript - ExtJS EditorGridPanel 和列渲染器

Question

我对 EditorGrid 的以下文档感到有点困惑:

Editing is performed on the value of the field specified by the column's dataIndex in the backing Store (so if you are using a renderer in order to display transformed data, this must be accounted for).

我不太确定在以下情况下如何“考虑”我的渲染器:

...

columns : [{
                header   : 'Foo',
                width    : 100,
                dataIndex: 'foo',
                renderer: function(value, p, record) {return value? value.bar: ""},  
                editor : new Ext.form.TextField({  
                    allowBlank : false  
                })
            }]
...

如您所见，此呈现器非常简单，但显然不适用于 TextField。我理解为什么在用户编辑时它只会显示我的 foo 对象而不是 bar 属性。

那么如何解决这个问题呢？我应该用新的 setValue 和 getValue 覆盖 Ext.form.TextField 吗？我考虑过使用事件 beforeedit 和 afteredit ，但这似乎有点矫枉过正。我觉得我在这里遗漏了一些非常简单的东西。

如果我不清楚，这里是我得到的结果的几个屏幕:

列渲染器工作!

Ext.form.TextField 获取对象

Answer 1

如果您想更改列显示值 的方式，您必须更改列渲染器和编辑器以反射(reflect)这一点。这意味着，是的，您必须在编辑事件之前和之后倾听并采取行动。

(如果您考虑一下，例如，我将 7 更改为 9。系统如何知道如何处理这个 9，因为您的值是完全不同的格式，实际上是一个对象。唯一的转换方法是将 9 转换回你想要的任何对象，这意味着在编辑和推送之前/之后监听，从编辑器中提取值到/从支持记录中提取值。)