Question

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

我已经为此编写了逻辑，它全部封装在扩展Ext.form.FieldSet的自定义组件中。但是，我想在带有记录的表单中使用这个组件，所以我猜我需要把它变成一个带有setValue，getValue和validator等函数的字段。我发现提供所有这些的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
    // ...
});

Answer 2

我以不同的方式实现了这一点，但是免责声明：它在extjs 4.1中停止了工作

我扩展了Ext.container.Container，然后将Ext.form.field.Field添加为mixin。从那里我实现了getValue / setValue。这一切都很有效，但4.1中突然出现了各种各样的问题。

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

2 个答案: