javascript - コンボ選択で動的に表示/非表示のフィールドを持つ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
    });
});