Getting out of the loop in EXTJS

Question

I am a noob to the extjs 4 MVC design. I have the following code.

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 ...
        });       
    }

As you can see i am adding a button on store load, and each button has further events down the line. The problem is i want to handle the sub events like the click events of the buttons down the chain outside the onLaunch as a separate method. But it seems like i cannot get out of this loop and all events are to be written as a chain. But it seems so wrong and with increasing amount of listeners, code gets messy. So is there a way that i can switch back and forth between controller methods and internals

Your question isn't really clear, I don't know what you're asking. — Evan Trimboli, Sep 28 '12 at 00:20
the code i have is working, i want to tidy it up thats it. For instance i want to handle the click event of the buttons i am adding to the form dynamically, outside the onLaunch method — swordfish, Sep 28 '12 at 00:49

score 1 · Accepted Answer · answered Sep 28 '12 at 06:41

Why didn't you use the eventbus (controls)? It is already there when you use a MVC app so I recommend to use it. When using it you have the listener method within your controller and the button instance as argument. The this keyword will give you the controller instance while you can use the button instance to navigate up and / down using up() / down(). For sure can add another unique identifier and check it is required.

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

score 0 · Answer 2 · answered Sep 28 '12 at 05:29

You better avoid using this keyword if you are not sure what will it be.

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

Also try use down method instead of Ext.getCmp if views that you are searching for are defined in controller's Views config.

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

Getting out of the loop in EXTJS

2 Answers2