title: Extjs Form with dynamically shown/hidden fields on combo selection
body: <p>Using Ext 4.1 I'd like to create a form with select combo, and depending on the currently selected option different subfields would be shown/hidden. Example below :</p>
  
  <p><img src="https://i.stack.imgur.com/niq6v.jpg" alt="enter image description here"></p>
  
  <p>Right now I have a combo and a set of two date fields that are hidden on render. When a combo value is changed I have an event listener that will display those fields. But I'm not sure if it's the best method to tackle this. Would a fieldset work better in this case ?</p>
  
  <pre><code>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,
          }
      ]
  });
  </code></pre>