当无线电场被选择显示特定面板时，如何在Extjs中为无线电组编写单个监听器？

Question

var radioGroup = {
        xtype: 'radiogroup',
        vertical: 'true',
        columns: 1,
        width: 200,
        items: [{
                    boxLabel: 'Select Predefined interval',
                    name: 'timeInterval',
                    id: 'selectPredefinedInterval',
                    inputValue: 'predefined',
                    listeners: {
                        change: function(rf, newValue, oldValue) {
                            if (newValue) {
                                Ext.getCmp('predefinedDatePanel').show();
                            } else {
                                Ext.getCmp('predefinedDatePanel').hide();
                            }
                        }
                    }

                },
                {
                    boxLabel: 'Specify last X hours/days',
                    name: 'timeInterval',
                    id: 'SpecifyLastHours',
                    inputValue: 'lasthours',
                    listeners: {
                        change: function(rf, newValue, oldValue) {
                            if (newValue) {
                                Ext.getCmp('lastXDatePanel').show();
                            } else {
                                Ext.getCmp('lastXDatePanel').hide();
                            }
                        }
                    }


                },
                {
                    boxLabel: 'Specify date or interval',
                    name: 'timeInterval',
                    id: 'specifiedDate',
                    inputValue: 'specifydate',
                    listeners: {
                        change: function(rf, newValue, oldValue) {
                            if (newValue) {
                                Ext.getCmp('specifyDatePanel').show();
                            } else {

                                Ext.getCmp('specifyDatePanel').hide();
                            }
                        }
                    }



                },

Answer 1

请尝试这样做，它可能对你有用..

var radioGroup = {
        xtype: 'radiogroup',
        vertical: 'true',
        columns: 1,
        width: 200,
        items: [{
                boxLabel: 'Select Predefined interval',
                name: 'timeInterval',
                id: 'selectPredefinedInterval',
                inputValue: 'predefined'
            },
            {
                boxLabel: 'Specify last X hours/days',
                name: 'timeInterval',
                id: 'SpecifyLastHours',
                inputValue: 'lasthours',
            },
            {
                boxLabel: 'Specify date or interval',
                name: 'timeInterval',
                id: 'specifiedDate',
                inputValue: 'specifydate'
            }
        ],
        listeners: {
            change: function(radio, newValue, oldValue) {

                Ext.getCmp('predefinedDatePanel').hide();
                Ext.getCmp('lastXDatePanel').hide();
                Ext.getCmp('specifyDatePanel').hide();

                if (radio.getValue().timeInterval == 'predefined' && newValue) {
                    Ext.getCmp('predefinedDatePanel').show();
                } else if (radio.getValue().timeInterval == 'lasthours' && newValue) {
                    Ext.getCmp('lastXDatePanel').show();
                } else if (radio.getValue().timeInterval == 'specifydate' && newValue) {
                    Ext.getCmp('specifyDatePanel').show();
                }
            }
        }

    },

实际上，不需要“＆amp;＆amp; newValue”...... 感谢..：）

Answer 2

在ExtJs文档 RadioGroup 中有更改事件。您可以参考ExtJs docs

我创建了一个小型演示，根据您的要求向您展示它是如何工作的。 Sencha fiddle example

Ext.create('Ext.form.Panel', {
    title: 'RadioGroup Example',
    width: '100%',
    height: 500,
    itemId: 'myPanel',
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    dockedItems: [{
        xtype: 'toolbar',
        defaults: {
            hidden: true
        },
        items: [{
            html: 'predefinedDatePanel',
            itemId: 'predefined'
        }, {
            html: 'lastXDatePanel',
            itemId: 'lasthours'
        }, {
            html: 'specifyDatePanel',
            itemId: 'specifydate'
        }]
    }],
    items: [, {
        xtype: 'radiogroup',
        vertical: 'true',
        columns: 1,
        width: 200,
        listeners: {
            change: function (rf, newValue, oldValue) {
                var myPanel = rf.up('#myPanel');
                myPanel.down('toolbar').items.items.map(item => {
                    item.hide();
                })
                myPanel.down(`#${newValue.timeInterval}`).show();
            }
        },
        items: [{
            boxLabel: 'Select Predefined interval',
            name: 'timeInterval',
            id: 'selectPredefinedInterval',
            inputValue: 'predefined'

        }, {
            boxLabel: 'Specify last X hours/days',
            name: 'timeInterval',
            id: 'SpecifyLastHours',
            inputValue: 'lasthours'

        }, {
            boxLabel: 'Specify date or interval',
            name: 'timeInterval',
            id: 'specifiedDate',
            inputValue: 'specifydate'
        }]
    }]
});