2

我是 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 之外的链下按钮的单击事件）作为单独的方法处理。但似乎我无法摆脱这个循环，所有事件都将被写成一个链。但这似乎是错误的，随着听众数量的增加，代码变得混乱。那么有没有一种方法可以在控制器方法和内部之间来回切换

4

2 回答 2

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
     });                                
}
于 2012-09-28T06:41:26.497 回答
0

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,                                
    })                         
}
于 2012-09-28T05:29:53.093 回答