ExtJS EditorGridPanel 和列渲染器答案

【问题标题】：ExtJS EditorGridPanel and the column rendererExtJS EditorGridPanel 和列渲染器
【发布时间】：2011-07-31 01:00:50
【问题描述】：

我对@987654321@ 的以下文档感到有些困惑：

对值进行编辑列的指定字段后备存储中的数据索引（所以如果您正在使用渲染器以显示转换后的数据，这必须是占）。

我不确定在以下情况下如何“解释”我的渲染器：

...

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 得到一个对象

【问题讨论】：

标签： javascript extjs editor grid

【解决方案1】：

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

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

【讨论】：

这对我来说很有意义。我想我不确定在活动前后我应该改变什么。如何访问编辑器？我有“event.grid”和“event.record”，所以我猜它在某个地方的网格中:)。
似乎应该有更简单的方法来做到这一点，因为我的数据转换是如此简单。
我将此标记为正确，但老实说，我没有看到这样做的好方法。我覆盖了 startEditing 方法，然后在 afteredit 事件中我改回来了。这很草率。我猜真正的方法是编写 Ext.form.Field 的扩展，以正确显示您的对象，并以某种方式允许正确编辑。
问题是，显示部分不是form.Field做的。它是由 grid.Column 完成的。所以我同意需要一种更好的方法（4.0 中有吗？）但我今天不知道有一个比在编辑之前/之后收听（一旦你有了编辑之前/之后的逻辑，你可以把这个内联或扩展 form.Field 如果您认为需要重用它。+1 对您的问题，顺便说一句
感谢您的帮助。我希望 ExtJS 4 为我们提供了一种更简单的方法来做到这一点。我还看到您所说的有关如何在现场未处理显示的内容。电网不足是多么奇怪的地方。我认为这将是一个普遍现象。干杯伙伴！