如何在Ext Js 4中從控制器引用多個radiogroup？

Question

我有一個包含2個radiogroups的面板。我正嘗試將更改事件綁定到來自控制器文件的這些項目。不想在視圖文件中使用監聽器配置。

在查看文件

     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' } 
           ] 
         }], 

和Controller我想如下的變化綁定事件：

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

這裏它指向第一個項目，不具約束力的第二個事件RadioGroup中。如果我綁定IDS它的工作正常。所以問題是我如何將更改事件綁定到所有的radiogroup，而無需在選擇器中傳遞id。讓我們說，在一個panle中，我有2個radiogroup項目，並希望將更改事件綁定到每個radiogroup。

由於一噸提前爲您解答!!!!

Answer 1

你可以做的是給每一個radioGroup中的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 
      } 
     }); 
    } 
    ...