javascript - 如何通过对其他表单域进行分组来创建自定义表单域？

Question

我想在 ExtJS 4 中将几个标准表单字段组合成一个自定义表单字段。基本上，我想要一个类别选择器:当您从第一个组合框中选择一个类别时，会出现一个显示其子类别的辅助组合框，依此类推.

我已经为此编写了逻辑并将其全部封装在一个扩展 Ext.form.FieldSet 的自定义组件中。 但是，我想在带有记录的表单中使用这个组件，所以我猜想我需要将它变成一个具有 setValue、getValue 和验证器等功能的字段。我发现 Ext.form.field.Base 提供了所有这些，但我找不到一种方法来和谐地组合这两个组件(一个像 Ext.form.FieldSet 的容器 + 一个像 Ext.form.field.base 的字段) .

有谁知道我能否以及如何完成此任务？

提前致谢!

Answer 1

以下解决方案可能不是最佳解决方案。但是它应该可以工作。

扩展 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
    // ...
});