Come creare un campo modulo personalizzato raggruppando altri campi modulo?

Question

Desidero raggruppare diversi campi modulo standard in un campo modulo singolo personalizzato in ExtJS 4. Fondamentalmente, desidero un selettore di categorie: quando selezionate una categoria dalla prima casella combinata, una casella combinata secondaria mostra le sue sottocategorie e così via.

Ho già scritto la logica per questo ed è tutto incapsulato in un componente personalizzato che estende Ext.form.FieldSet. Ma, voglio utilizzare questo componente all'interno di un modulo con i record, quindi suppongo di doverlo trasformare in un campo con funzioni come setValue, getValue e un validatore. Ho trovato Ext.form.field.Base che offre tutto questo, ma non riesco a trovare un modo per combinare armoniosamente i due componenti (un contenitore come Ext.form.FieldSet + un campo come Ext.form.field.base) .

Qualcuno sa se e come posso realizzare questo?

Grazie in anticipo!

Answer 1

La seguente soluzione potrebbe non essere la migliore. Tuttavia dovrebbe funzionare.

Estendere Ext.form.field.Base. Quindi creare Ext.form.FieldSet nel gestore afterrender e aggiungerlo al campo inputEl. Poi, naturalmente, di valueToRaw, setRawValue campo override, ...

Ecco un codice:

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

ho realizzato questo in un modo diverso, ma disclaimer: ha smesso di funzionare in ExtJS 4.1

Ho esteso Ext.container.Container, quindi ho aggiunto Ext.form.field.Field come mixin. Da lì ho implementato getValue/setValue. Funzionava tutto alla grande, ma improvvisamente ha una serie di problemi in 4.1.