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!
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
// ...
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With