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 bobox, a secondary bobox appears displaying its subcategories, and so on.
I've already written the logic for this and it's all encapsulated in a custom ponent that extends Ext.form.FieldSet. But, I want to use this ponent 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 bine the two ponents harmoniously (a container like Ext.form.FieldSet + a field like Ext.form.field.base).
Does anyone know if and how I can acplish this?
Thank you in advance!
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 bobox, a secondary bobox appears displaying its subcategories, and so on.
I've already written the logic for this and it's all encapsulated in a custom ponent that extends Ext.form.FieldSet. But, I want to use this ponent 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 bine the two ponents harmoniously (a container like Ext.form.FieldSet + a field like Ext.form.field.base).
Does anyone know if and how I can acplish this?
Thank you in advance!
Share Improve this question asked Sep 13, 2011 at 12:11 liviucmgliviucmg 1,3303 gold badges18 silver badges26 bronze badges2 Answers
Reset to default 7The 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>',
{
piled: 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
// ...
});
I acplished this in a different way, but disclaimer: it stopped working in extjs 4.1
I extended Ext.container.Container, then added Ext.form.field.Field as a mixin. From there I implemented getValue/setValue. It all worked great, but suddenly has a variety of issues in 4.1.