我有一个有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。
提前感谢您的答案!!!!
答案 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
}
});
}
...