如何从 Ext Js 4 中的控制器引用多个无线电组？

Question

我有一个包含 2 个无线电组的面板。我正在尝试将更改事件从控制器文件绑定到这些项目。不想在视图文件中使用监听器配置。

在查看文件中

                        items : [{
                            xtype:'radiogroup',
                             fieldLabel: 'Two Columns',
                                // Arrange radio buttons into two columns, distributed vertically
                                columns: 2,
                                id:'new_0',
                                vertical: true,
                                items: [
                                    { boxLabel: 'Item 1', name: 'rb1', inputValue: '1' },
                                    { boxLabel: 'Item 2', name: 'rb1', inputValue: '2', checked: true},
                                    { boxLabel: 'Item 3', name: 'rb1', inputValue: '3' },
                                    { boxLabel: 'Item 4', name: 'rb1', inputValue: '4' },
                                    { boxLabel: 'Item 5', name: 'rb1', inputValue: '5' },
                                    { boxLabel: 'Item 6', name: 'rb1', inputValue: '6' }
                                ]
                        },
                        {
                            xtype:'radiogroup',
                             fieldLabel: 'Two Columns',
                             id:'new_1',
                                // Arrange radio buttons into two columns, distributed vertically
                                columns: 2,
                                vertical: true,
                                items: [
                                    { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
                                    { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
                                    { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
                                    { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
                                    { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
                                    { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
                                ]
                        }],

在控制器中，我尝试按如下方式绑定更改事件：

                refs : [ 
                {
                    ref :'myradio',
                    selector:'radiogroup'
                }],

这里它指向第一个项目，而不是绑定第二个无线电组的事件。如果我与 ids 绑定它工作正常。所以问题是我如何将更改事件绑定到所有无线电组而不在选择器中传递 id。假设在一个面板中，我有 2 个无线电组项目，并且想将更改事件绑定到每个无线电组。

非常感谢您的回答！！！！

Answer 1

您可以做的是给每个无线电组一个itemId 而不是id。然后在您的控制器中，您应该能够引用每个 radiogroup 并将您想要的所有事件绑定到每个事件。所以你的控制器应该是这样的：

    ...
    refs: [
        {
            autoCreate: true,
            ref: 'firstbtngroup',
            selector: '#firstbtngroup', // itemId for first radio group
            xtype: 'Ext.form.RadioGroup'
        },
        {
            autoCreate: true,
            ref: 'secondbtngroup',
            selector: '#secondbtngroup', // itemId for second radio group
            xtype: 'Ext.form.RadioGroup'
        }
    ],

    onFirstbtngroupChange: function(field, newValue, oldValue, eOpts) {
        console.log('Hey you...');
    },

    onSecondbtngroupEnable: function(component, eOpts) {
        console.log('Hey there again...');
    },

    onFirstbtngroupAfterRender: function(component, eOpts) {
        console.log('Dude I just renedered.');
    },

    onSecondbtngroupDestroy: function(component, eOpts) {
        console.log('Why would you destroy me!!!');
    },

    init: function(application) {
        this.control({
            "#firstbtngroup": {
                change: this.onFirstbtngroupChange,
                afterrender: this.onFirstbtngroupAfterRender
            },
            "#secondbtngroup": {
                enable: this.onSecondbtngroupEnable,
                destroy: this.onSecondbtngroupDestroy
            }
        });
    }
    ...