javascript - 在组合选择上具有动态显示/隐藏字段的 Extjs 表单

Question

使用 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,
        }
    ]
});

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