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

Question

I want to group several standard form fields into one custom form field in ExtJS 4. Basically, I want the category selector: when you select a category from the first list with a list, a secondary list box appears, displaying its subcategories, etc. .

I already wrote the logic for this, and all of this is encapsulated in a custom component that extends Ext.form.FieldSet. But , I want to use this component inside the form with records, so I assume that I need to turn it into a field with functions such as setValue, getValue and validator. I found Ext.form.field.Base that offers all this, but I cannot find a way to harmoniously combine the two components (a container such as Ext.form.FieldSet +, a field such as Ext.form.field.base).

Does anyone know if and how I can do this?

Thank you in advance!

Answer 1

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

Extend Ext.form.field.Base . Then create an Ext.form.FieldSet in the afterrender handler and add it to the inputEl field. Then, of course, override the field valueToRaw , setRawValue , ...

Here is the 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 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

I did it differently, but refused: it stopped working in extjs 4.1

I expanded Ext.container.Container and then added Ext.form.field.Field as mixin. From there I implemented getValue / setValue. All this worked perfectly, but 4 times unexpectedly a lot of problems arose.