EXTJS의 루프 빠져 나오기

Question

나는 extjs 4 MVC 설계에 멍청하다. 다음 코드가 있습니다.

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

왜 이벤트 버스 (컨트롤)를 사용하지 않았습니까? 이미 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 키워드를 사용하지 않는 것이 좋습니다. 당신이 찾고있다 뷰 컨트롤러의 Views 설정에 정의 된 경우

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

또한 사용을 대신 Ext.getCmp의 down 방법을 시도.

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