如何从Ext Js 4中的控制器引用多个radiogroup?

时间:2013-04-29 14:38:30

标签: extjs extjs4 extjs4.1 radio-group

我有一个有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的情况下将更改事件绑定到所有radiogroup。让我们说在panle中我有2个radiogroup项目,并希望将change事件绑定到每个radiogroup。

提前感谢您的答案!!!!

1 个答案:

答案 0 :(得分: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
            }
        });
    }
    ...