如何通过分组其他表单字段来创建自定义表单字段？

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.然后Ext.form.FieldSet在afterrender处理程序中创建并将其附加到字段的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
    // ...
});