具有多种 xtypes 的 ExtJS 5 网格小部件列

Posted 2023-02-26

【中文标题】具有多种 xtypes 的 ExtJS 5 网格小部件列

【英文标题】：ExtJS 5 Grid Widget Column with Multiple xtypes

【发布时间】：2014-06-10 17:01:21

【问题描述】：

我有一个这样的数据对象：

data = [
    text: 'What is your name?', xtype: 'textfield',
    text: 'What is your favorite number?', xtype: 'numberfield'
]

我需要一个网格来在各自的行中显示每个数据对象。该行应包含提供的 xtype 的表单字段。

在 ExtJS 4 中使用这个插件很容易实现这一点：http://skirtlesden.com/ux/component-column。

使用此插件，开发人员只需在列配置上指定一个“渲染器”函数，该函数返回任意组件的配置对象，然后该组件将在单元格中呈现。不幸的是，这个插件不适用于 ExtJS 5。

ExtJS 5 似乎承诺通过其新的“Widget Column”功能来解决对这个插件的需求，所以我急切地等待它的发布，但是当它最终问世时，它并没有辜负炒作。似乎要求每一行都具有相同的确切组件，只有值不同。 Widget Column 的一行似乎没有办法有一个文本字段，而下一行有一个数字字段。

我的结论是否正确，即新的 ExtJS 5“小部件列”功能太有限，不适用于我的用例？

【参考方案1】：

我的一个项目也遇到了同样的问题。不幸的是，渲染器还不是小部件列的选项。据说 Extjs 5.0.1 即将发布，他们声称这将修复 Extjs 5 中存在的许多错误，所以我希望这包括在修复中。在此之前，我建议使用您引用的组件列插件。只要你替换它，它就适用于 Extjs 5

return this.lastFrameWidth = parentDiv.getFrameWidth('lr') + parentTd.getFrameWidth('lr');

与

return this.lastFrameWidth = parentDiv.getBorderWidth('lr') + parentDiv.getPadding('lr') + parentTd.getBorderWidth('lr') + parentTd.getPadding('lr');

Source.

renderer 的参数之一是组件所在位置的记录和行号，当它为rendered 时，可以保存在自定义属性中，以便在以后的事件中使用，例如change。