How to create a custom form field by grouping other form fields?

Question

I want to group several standard form fields into a single custom form field in ExtJS 4. Basically, I want a category selector: when you select a category from the first combobox, a secondary combobox appears displaying its subcategories, and so on.

I've already written the logic for this and it's all encapsulated in a custom component that extends Ext.form.FieldSet. But, I want to use this component inside a form with records, so I'm guessing that I need to turn it into a field with functions like setValue, getValue and a validator. I found Ext.form.field.Base that offers all of this, but I can't find a way to combine the two components harmoniously (a container like Ext.form.FieldSet + a field like Ext.form.field.base).

Does anyone know if and how I can accomplish this?

Thank you in advance!

Answer 1

The following solution may be not the best one. However it should work.

Extend Ext.form.field.Base. Then create Ext.form.FieldSet in afterrender handler and append it to field's inputEl. Then, of course, override field's valueToRaw, setRawValue, ...

Here is a code:

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