走出EXTJS循環

Question

我是extjs 4 MVC設計的noob。我有以下代碼。

onLaunch: function() { 
     console.log("Launched Business Unit Controller"); 
     var businessunitsStore = this.getStore('Businessunits'); 
     businessunitsStore.load(function(records){ 
      var comp = Ext.getCmp('business_form');    
      for(var i=0;i<records.length;i++){ 
       bu = records[i].data; 
       console.log(bu); 
       comp.add({ 
        xtype:'button', 
        cls:'x-button', 
        width:90, 
        autoScroll:false, 
        height:60,            
        text:bu.businessunit_name, 
        enableToggle:true, 
        listeners:{ 
         click: function(){ 
          var pnl = Ext.getCmp('active-units-form');  
          pnl.add({ 
           xtype:'label',         
           text:this.text,         
          })       
         } 
        }           
       }) //comp.add 
      } //for ... 
     });  
    } 

正如你所看到的，我在存儲負載上增加了一個按鈕，並且每個按鈕都有更多的事件在線下。問題是我想處理子事件，如onLaunch之外的按鈕點擊事件作爲一個單獨的方法。但似乎我無法擺脫這個循環，所有事件都將被寫成一個鏈。但它似乎是錯誤的，隨着聽衆數量的增加，代碼變得混亂。那麼有沒有辦法，我可以在控制器方法和內部之間來回切換

Answer 1

爲什麼不使用eventbus（控件）？當您使用MVC應用程序時，它已經存在，所以我建議使用它。當使用它時，你的控制器中有監聽器方法，而按鈕實例是參數。關鍵字this將爲您提供控制器實例，同時您可以使用按鈕實例向上/向下導航，使用up()/down()。肯定可以添加另一個唯一的標識符並檢查它是必需的。

onLaunch: function() { 
    controls('#business_form button[ident=businessunit-btn]':{click:this.onClickBussinesUnitBtn}); 
    console.log("Launched Business Unit Controller"); 
    var businessunitsStore = this.getStore('Businessunits'); 
    businessunitsStore.load(function(records){ 
     var comp = Ext.getCmp('business_form');    
     for(var i=0;i<records.length;i++){ 
      bu = records[i].data; 
      console.log(bu); 
      comp.add({ 
       xtype:'button', 
       cls:'x-button', 
       ident: 'businessunit-btn', 
       width:90, 
       autoScroll:false, 
       height:60,            
       text:bu.businessunit_name, 
       enableToggle:true          
      }) //comp.add 
     } //for ... 
    });  
}, 
onClickBussinesUnitBtn: function(btn){ 
    var pnl = Ext.getCmp('active-units-form'); // I recommend you to instantiate this either also with a controller function, so that you can store the reference or doing it with up/down as Alexey mentioned. 
    pnl.add({ 
     xtype:'label',         
     text:btn.text 
    });         
} 

Answer 2

如果您不確定它會是什麼，最好避免使用this關鍵字。

click: function (button) { 
    var pnl = Ext.getCmp('active-units-form');  
    pnl.add({ 
     xtype: 'label',         
     text: button.text,         
    })       
} 

也可以嘗試使用down方法，而不是Ext.getCmp如果意見，你正在尋找控制器的Views配置定義。

onLaunch: function() { 
    console.log("Launched Business Unit Controller"); 
    var businessunitsStore = this.getStore('Businessunits'); 
    businessunitsStore.load(function(records){ 
     var comp = this.down('#business_form'); //Ext.getCmp('business_form');    
     for(var i = 0; i < records.length; i++){ 
      bu = records[i]; //.data; 
      console.log(bu); 

      var button = comp.add({ 
       xtype:'button', 
       cls:'x-button', 
       width:90, 
       autoScroll:false, 
       height:60,            
       text:bu.get('businessunit_name'), //bu.businessunit_name, 
       enableToggle:true, 
      }) //comp.add 

      button.on('click', this.businessUnitButton_click, this); 
      // 3rd parameter 'this' will be controller instance inside handler 
     } //for ... 
    });  
}, 

businessUnitButton_click: function (button) { 
    // 'this' is controller 
    var pnl = this.down('#active-units-form'); // Ext.getCmp('active-units-form'); 
    pnl.add({ 
     xtype:'label',         
     text: button.text,         
    })       
}