¿Cómo crear un campo de formulario personalizado agrupando otros campos de formulario?

Question

Quiero agrupar varios campos de formulario estándar en un solo campo de formulario personalizado en ExtJS 4. Básicamente, quiero un selector de categoría: cuando selecciona una categoría del primer cuadro combinado, aparece un cuadro combinado secundario que muestra sus subcategorías, y así sucesivamente.

Ya he escrito la lógica para esto y está todo encapsulado en un componente personalizado que amplía Ext.form.FieldSet. Pero, quiero usar este componente dentro de un formulario con registros, así que supongo que necesito convertirlo en un campo con funciones como setValue, getValue y un validador. Encontré Ext.form.field.Base que ofrece todo esto, pero no puedo encontrar una manera de combinar los dos componentes armoniosamente (un contenedor como Ext.form.FieldSet + un campo como Ext.form.field.base) .

¿Alguien sabe si y cómo puedo lograr esto?

¡Gracias de antemano!

Answer 1

La siguiente solución puede no ser la mejor. Sin embargo, debería funcionar.

Extienda Ext.form.field.Base. A continuación, cree Ext.form.FieldSet en el controlador afterrender y añádalo al campo inputEl. Luego, por supuesto, de valueToRaw, setRawValue campo de anulación, ...

Aquí es un código:

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

Answer 2

he logrado esto de una manera diferente, pero exención de responsabilidad: que dejó de funcionar en extjs 4.1

Extiendo Ext.container.Container, luego agregué Ext.form.field.Field como mixin. A partir de ahí implementé getValue/setValue. Todo funcionó muy bien, pero de repente tiene una variedad de problemas en 4.1.