移花接木扩展 Ext JS 控件

核心提示： 为了用 Ext 构建这样的组件，我们首先想到的是选用 Editor Grid 组件或者 Property Grid 组件，移花接木扩展 Ext JS 控件(3)，Editor Grid（可编辑表格控件）扩展自 GridPanel，提供对于选中列的单元格编辑，可以根据表格的内容动态的改变单元格的编

为了用 Ext 构建这样的组件，我们首先想到的是选用 Editor Grid 组件或者 Property Grid 组件。Editor Grid（可编辑表格控件）扩展自 GridPanel，提供对于选中列的单元格编辑。可编辑的列是通过在表示表格的列信息的类 Ext.grid.ColumnModel 中添加 editor 来实现的。但是这个 editor 是对整个列有效的，就是说每一行在该列的位置的数据的编辑器是一样的。

Property Grid( 属性表格 ) 扩展自 EditorGridPanel，所以可以直接编辑右边属性值部分的内容。但是，只是右边的，即使你单击左边的单元格，编辑器也只会出现在右边。实际上，我们可以用散列表来形容 PropertyGrid，左边可以看作 key，右边的是 value。key 是由我们指定好的，用户只需要修改对应的 value 即可。

Property Grid 默认的编辑器包括 TextField、DateField、NumberField 和 ComboBox，也就只能处理数字、字符串的输入和日期的选择，布尔值的选择等一般的情况。当我们想对编辑器进行更详细的配置时，就需要用到 PropertyGrid 的 customEditors，为指定 id 的那行数据设置对应的编辑器。customEditors 和 source 的设置基本一样，只需要将两者的属性名称对应起来，并且为 customEditors 里的所有属性指定一个 editor。

Property Grid 虽然能够给不同的单元格定制不同的编辑器，但是一方面这种表格只有两列，第一列还不可编辑，而且表格的内容（source）需要事先确定；另一方面定义 customEditors 的时候必须知道表格的内容（source），而且必须将两者的属性名称对应起来。

Editor Grid 其实已经大部分满足了我们的需求，只是不能对每个单元格定制编辑器，只能指定列编辑器。

经过上面的分析，单纯的使用任何一个控件，都难以达到我们的目的。同时我们发现问题主要出在 Editor Grid 的列模式（ColumnModel）上，Property Grid 就是扩展自 Editor Grid，通过对其 ColumnModel 的扩展来支持单元格的编辑器。所以我们尝试把 Editor Grid 的 ColumnModel 扩展一下，使得新的 ColumnModel 支持 customEditors，这样我们就获得了对编辑器的完全控制权，可以根据表格的内容动态的改变单元格的编辑器了。清单 3 是我们为满足上述需求而扩展的新类 MyColumnModel 的部分代码，清单 4 是使用 MyColumnModel 构造了一个 Editor Grid 作为基金申请条件组件。