EXTJS與組合選擇

Question

使用分機4.1我想創建與選擇的組合形式，並根據當前選擇的選項不同分支學科動態顯示/隱藏字段的形式是顯示/隱藏。下面的示例：

現在我有一個組合和一組隱藏在呈現兩個日期字段。當組合值發生變化時，我有一個事件偵聽器將顯示這些字段。但我不確定這是否是解決此問題的最佳方法。在這種情況下，字段集可以更好地工作嗎？

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

東西沿着這些路線：

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