Getting reference or Id of the object the fired an event

[kret]

Hi,

I have a view that contains two Panels that should contain buttons added dynamically.

Clicking on first bar (Panel) button should affect in reloading buttons on the second bar (differently for every button). Clicking on the second bar buttons should do something depending on which button user has clicked.

Doing this in one big function that has nested "handler: function()" will work but it is not very clean solution.

If I will split this on different functions I have a problem on getting the reference to the button that has fired a particular event.

Can you tell me how to fix this?
I am using ST 2.0 B4

My controller code looks like this:

Ext.define('Main',
{
    extend: 'Ext.app.Controller',
    requier: 
    [    
        'FirstBar',
        'SecondBar'
    ],
    
    config:
    {
        refs:
        {
            firstBar: '#firstbar',
            secondBar: '#second'
        },
        control:
        {
            'button[action=sbbuttonfired]': 
            {
                tap: 'seconBarButtonAction'
            }
        }
    },
    
    
    launch: function()
    {
            
        this.addItemsToFirstBar();
        this.attachEventToFirstBar();
        
        
    },
    
    addItemsToFirstBar: function()
    {
        var nb1 = 4; //Number of buttons on the first bar
        var fb = this.getFirstBar();
        
        for(var i = 0; i < nb1; i++)
        {
            fb.add(
            {
                xtype: 'button',
                text: 'button' + i,
                id: 'firstbarbutton' + i,
                action: 'fbbuttonfired'
            });
        }
    },
    
    attachEventToFirstBar: function()
    {
        var fb = this.getFirstBar();
        for(var i=0; i < fb.items.items.length; i++)
        {
            fb.items.items[i].on('tap', this.firstBarButtonAction);
        }
    },
    
    firstBarButtonAction: function()//Fired thanks to the event attached 
                                    //in the attachEventToFirstBar function
    {
        alert(this.getId());// This will return the Id of the 
                            //button but if this would be fired 
                            //from the control section I would get
                            //the Id of the controller
        var firstBarButtonId = this.getId();
        var nb2 = 5; //Number of buttons on the second bar
        var sb = Ext.getCmp('dosagebar');
        for(var i = 0; i < nb2; i++)
        {
            sb.add(
            {
                xtype: 'button',
                text: 'button ' + firstBarButtonId + '_' + i,
                id: 'secondbarbutton' + i,
                action: 'sbbuttonfired'
            });
        }
        
        //this.attachEventToSecondBar(); //this dosen't work now and returns error: 
        //Uncaught TypeError: Object [object Object] has no method 'attachEventToSecondBar'
        //I think it is because we are now in the context of the button that is why I would like to use
        //control section to handle this event.
    },
    
    attachEventToSecondBar: function()
    {
        var sb = Ext.getCmp('dosagebar');
        for(var i=0; i < sb.items.items.length; i++)
        {
            sb.items.items[i].on('tap', this.seconBarButtonAction);
        }
    },
    
    seconBarButtonAction: function() //Fired thank to the entires in the control section
    {
        alert(this.getId()); //This will return the id of the controller 
        //I need to have the Id or reference of the button that has fired a tap event 
    }
    
    
});

[mitchellsimoens]

I would use the control config more. I would give each a different action property value and use them in the ComponentQuery selector like you already have.

[kret]

Thank you for the reply but I do not see how this would help me.
If I would give each button a different action I would need to create different method to handle it which seems redundant.
Secondly I would like to change the number of buttons on the bars dynamically (i.e. putting configuration in the model / store) so for every change in the store I would need to change the code.

[kret]

OK.

So I have found a solution, maybe not one of the cleanest in the MVC manner but it will have to do for now.
What I have done is to put all the methods that handle the fire events as a statics.
Too bad that I cannot get it to work in the normal way but I guess that is something that I have to live with.

Anyway there is my code:

Ext.define('Main',
{
    extend: 'Ext.app.Controller',
    require: 
    [    
        'FirstBar',
        'SecondBar'
    ],
    statics:
    {
        attachEvent2Bar: function( bar, eventFunction)
        {
            for(var i=0; i < bar.items.items.length; i++)
            {
                bar.items.items[i].on('tap', eventFunction);
            }
        },
        firstBarButtonAction: function()//Fired thanks to the event attached 
                                    //in the attachEvent2Bar function
        {
            alert(this.getId());// This will return the Id of the button
            var firstBarButtonId = this.getId();
            var nb2 = 5; //Number of buttons on the second bar - might be dynamic
            var sb = Ext.getCmp('dosagebar');
            for(var i = 0; i < nb2; i++)
            {
                sb.add(
                {
                    xtype: 'button',
                    text: 'button ' + firstBarButtonId + '_' + i,
                    id: 'secondbarbutton' + i,
                    action: 'sbbuttonfired'
                });
            }
            
            Main.attachEvent2Bar(sb, Main.seconBarButtonAction);
            
        },
        seconBarButtonAction: function()
        {
            alert(this.getId()); //This will return now the id of the button 
        }
    },
    config:
    {
        refs:
        {
            firstBar: '#firstbar',
            secondBar: '#second'
        }
    },
    
    launch: function()
    {
            
        this.addItemsToFirstBar();
        var fb = this.getFirstBar();
        Main.attachEvent2Bar(fb, Main.firstBarButtonAction);
        
        
    },
    
    addItemsToFirstBar: function()
    {
        var nb1 = 4; //Number of buttons on the first bar
        var fb = this.getFirstBar();
        
        for(var i = 0; i < nb1; i++)
        {
            fb.add(
            {
                xtype: 'button',
                text: 'button' + i,
                id: 'firstbarbutton' + i,
                action: 'fbbuttonfired'
            });
        }
    }
    
});

[mitchellsimoens]

You have two different actions for your buttons:

Clicking on first bar (Panel) button should affect in reloading buttons on the second bar (differently for every button). Clicking on the second bar buttons should do something depending on which button user has clicked.

[kret]

Yes I understand but when buttons are generated automatically (I might not know how many of the will be finally rendered) I will not be able to define different action handler (in control section).

[mitchellsimoens]

Already have the listeners defined in the control section. Then when you create the buttons it will automatically be listened to.

[kret]

Yes, perfect but how will I know exactly which button has been pressed.
Lets say I have 10 buttons with the same action. I would like to know which I have pressed: 1st, 3rd or 10th button.

[mitchellsimoens]

Set something on the button to tell it what it is.

[kret]

That is exactly my point. How will I get reference to the button to get Id for example?

If I am using this.getId() inside a function called thanks to binding action in the control section I will not get the Id of the button but the Id of the controller.