Formularz Extjs z dynamicznie wyświetlanymi/ukrytymi polami podczas wyboru kombinowanego

Question

Korzystanie z Ext 4.1 Chciałbym utworzyć formularz z wybraną kombinacją iw zależności od aktualnie wybranej opcji będą pokazywane/ukrywane różne subpola. Przykład poniżej:

Teraz mam kombi oraz zestaw dwóch pól daty, które są ukryte na render. Po zmianie wartości combo mam detektor zdarzeń, który wyświetli te pola. Ale nie jestem pewien, czy to najlepsza metoda rozwiązania tego problemu. Czy zestaw pól działałby lepiej w tym przypadku?

Ext.define('TooltipForm', { 
    extend: 'Ext.form.Panel', 
    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    border: false, 
    bodyPadding: 10, 

    initComponent: function(){ 
     this.on('afterrender', this.onAfterRender, this); 

     this.callParent(arguments); 
    }, 

    onAfterRender: function(){ 
     this.items.each(function(item){ 
      item.on('change', this.onChange, this); 
     }, this); 
    }, 

    onChange: function(field, newValue){ 
     if (field.name === 'range'){ 
      switch(newValue){ 
       case 'fit': 
        console.log('fit view'); 
        break; 
       case 'complete': 
        console.log('complete view'); 
        break; 
       case 'date range': 
        console.log('date range view'); 
        break; 
      } 
     } 
    }, 

    fieldDefaults: { 
     labelAlign: 'top', 
     labelWidth: 100, 
     labelStyle: 'font-weight:bold' 
    }, 
    items: [ 
     { 
      width:   50, 
      xtype:   'combo', 
      mode:   'local', 
      value:   'fit', 
      triggerAction: 'all', 
      forceSelection: true, 
      editable:  false, 
      fieldLabel:  me.rangeFieldLabel, 
      name:   'range', 
      queryMode:  'local', 
      store:   ['fit', 'complete', 'date range'] 
     }, 
     { 
      width:50, 
      xtype: 'datefield', 
      fieldLabel: 'date from', 
      name: 'datefrom', 
      hidden: true 
     }, 
     { 
      width:50, 
      xtype: 'datefield', 
      fieldLabel: 'date to', 
      name: 'dateto', 
      hidden:true, 
     } 
    ] 
}); 

Answer 1

Coś wzdłuż tych linii:

Ext.define('TooltipForm', { 
    extend: 'Ext.form.Panel', 
    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    border: false, 
    bodyPadding: 10, 
    rangeFieldLabel: 'Foo', 

    initComponent: function() { 
     Ext.apply(this, { 
      fieldDefaults: { 
       labelAlign: 'top', 
       labelWidth: 100, 
       labelStyle: 'font-weight:bold' 
      }, 
      items: [{ 
       itemId: 'range', 
       width: 50, 
       xtype: 'combo', 
       value: 'fit', 
       triggerAction: 'all', 
       forceSelection: true, 
       editable: false, 
       fieldLabel: this.rangeFieldLabel, 
       name: 'range', 
       queryMode: 'local', 
       store: ['fit', 'complete', 'date range'] 
      }, { 
       itemId: 'dateFrom', 
       width: 50, 
       xtype: 'datefield', 
       fieldLabel: 'date from', 
       name: 'datefrom', 
       hidden: true 
      }, { 
       itemId: 'dateTo', 
       width: 50, 
       xtype: 'datefield', 
       fieldLabel: 'date to', 
       name: 'dateto', 
       hidden: true, 
      }] 
     }); 

     this.callParent(arguments); 
     this.child('#range').on('change', this.onChange, this); 
    }, 

    onChange: function(field, newValue) { 
     switch(newValue) { 
      case 'fit': 
       console.log('fit view'); 
       // do something else 
       break; 
      case 'complete': 
       this.child('#dateFrom').hide(); 
       this.child('#dateTo').hide(); 
       break; 
      case 'date range': 
       this.child('#dateFrom').show(); 
       this.child('#dateTo').show(); 
       break; 
     } 
    }, 
}); 

Ext.onReady(function(){ 
    new TooltipForm({ 
     renderTo: document.body 
    }); 
});