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

为什么不使用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,                                
    })                         
}

退出EXTJS循环

2 个答案: