Açılan formda dinamik olarak gösterilen/gizli alanlara sahip Extjs Formu

Question

Ext 4,1'i kullanma Select combo ile bir form oluşturmak istiyorum ve seçili olan seçeneğe bağlı olarak farklı alt alanlar gösterilecek/gizlenecektir. Aşağıdaki Örnek:

Şu anda bir açılan ve işlemek üzerinde gizlidir iki tarih alanına bir dizi var. Birleşik değer değiştirildiğinde, bu alanları görüntüleyen bir olay dinleyicim var. Ama bunun üstesinden gelmenin en iyi yolu olup olmadığından emin değilim. Bir tarla bu durumda daha iyi çalışır mı? Bu doğrultuda

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

şey:

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