Форма Extjs с динамически отображаемыми/скрытыми полями при выборе комбо

Используя Ext 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,
        }
    ]
});