走出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,         
    })       
}