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!

score 7 · Accepted Answer · answered Sep 13 '11 at 14:40

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

Thank you! This is what I ended up doing. I don't know why but it has some rendering issues: The fieldset won't stretch to the container's full width, even when using an 100% anchor layout. I added an `Ext.apply(this, {listeners: {resize: function() {$this.container.doLayout();}}});` and it partially solves the problem. Hack hack hack. :) I'm going to mark this as accepted if no one else comes up with a better idea. — liviucmg, Sep 14 '11 at 09:43

score 2 · Answer 2 · edited Oct 26 '12 at 06:15

2

I accomplished 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.

edited Oct 26 '12 at 06:15

The Unfun Cat

29,987
31
114
156

answered Apr 26 '12 at 21:30

Nathan Wolf

43
5

Could You post your code somewhere? This way maybe we all can get this working – Misiu Jan 10 '14 at 12:13
I'm afraid I can't since I no longer work with that company and don't have the code anymore! – Nathan Wolf Jan 10 '14 at 15:50
1

I could attempt to reproduce it at some point, but I haven't worked with EXTjs in a little while. It was honestly not very complex, though- basically as described above, the only "tricky" thing I did was to add Form.field.Field as a mixin, so the "aggregate" field could behave like a normal single field, once getValue and setValue were implemented. From there it's a relatively simple matter of dealing with the contained child Fields... I hope that helps! But I hope there is a better way, I've never found it. – Nathan Wolf Jan 10 '14 at 15:51
1

Thanks for description :) I found solution that You just described here: http://stackoverflow.com/a/17059073/965722 I want to create custom form fields with more than one control in row. I found your post first, then thanks to Your description I found link that I attached :) – Misiu Jan 11 '14 at 08:03

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

2 Answers2