javascript - How to create a custom form field by grouping other form fields? - Stack Overflow

admin管理员组

文章数量:1315252

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!

• javascript
• web-applications
• extjs
• extjs4

Share Improve this question Follow asked Sep 13, 2011 at 12:11 liviucmgliviucmg 1,33033 gold badges1818 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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>',
        {
            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.

本文标签： javascriptHow to create a custom form field by grouping other form fieldsStack Overflow