Extjsコンボ選択で動的に表示/非表示のフィールドを持つフォーム

Question

Ext 4.1を使用すると、選択コンボでフォームを作成したいと思います。現在選択されているオプションによって、異なるサブフィールドが表示/非表示になります。例の下：

今私は、コンボやレンダリングに隠されている2つの日付フィールドのセットを持っています。コンボ値が変更されると、私はこれらのフィールドを表示するイベントリスナーを持っています。しかし、これに取り組むのが最良の方法であるかどうかはわかりません。この場合、フィールドセットはうまくいくでしょうか？

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