我想在 ExtJS 4 中将几个标准表单域组合成一个自定义表单域。基本上，我想要一个类别选择器：当您从第一个组合框中选择一个类别时，会出现一个显示其子类别的辅助组合框，依此类推.
我已经为此编写了逻辑，并且它全部封装在扩展 Ext.form.FieldSet 的自定义组件中。 但是，我想在带有记录的表单中使用这个组件，所以我猜我需要将它变成一个具有 setValue、getValue 和验证器等功能的字段。我找到了提供所有这些的 Ext.form.field.Base，但我找不到将这两个组件和谐地结合起来的方法（像 Ext.form.FieldSet 这样的容器 + 像 Ext.form.field.base 这样的字段） .
有谁知道我是否以及如何做到这一点？
提前谢谢你！
【问题讨论】：
标签： javascript web-applications extjs extjs4
以下解决方案可能不是最好的解决方案。但是它应该可以工作。
扩展Ext.form.field.Base。然后在afterrender 处理程序中创建Ext.form.FieldSet 并将其附加到字段的inputEl。然后，当然，覆盖字段的valueToRaw，setRawValue，...
这是一个代码：
Ext.define('Ext.ux.form.field.MyCoolField', {
extend:'Ext.form.field.Base',
requires: ['Ext.util.Format', 'Ext.XTemplate'],
fieldSubTpl: [
'<div id="{id}" class="{fieldCls}"></div>',
{
compiled: true,
disableFormats: true
}
],
isFormField: true,
submitValue: true,
afterRender: function() {
this.callParent();
this.fieldSet = Ext.create('Ext.form.FieldSet', {
items: [{
// ... config of the first item
// The following configs should be set to false. It's important.
// Otherwise form will assume this items as its fields
isFormField: false,
submitValue: false
});
this.fieldSet.render(this.inputEl);
},
// and here overriding valueToRaw and so on
// ...
});
【讨论】：
Ext.apply(this, {listeners: {resize: function() {$this.container.doLayout();}}});，它部分解决了问题。骇客骇客。 :) 如果没有其他人提出更好的主意，我会将其标记为已接受。
我以不同的方式完成了这项工作，但免责声明：它在 extjs 4.1 中停止工作
我扩展了 Ext.container.Container，然后添加了 Ext.form.field.Field 作为 mixin。从那里我实现了getValue/setValue。一切都很好，但在 4.1 中突然出现了各种问题。
【讨论】：