1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    14
    Vote Rating
    0
    kret is on a distinguished road

      0  

    Default Unanswered: Getting reference or Id of the object the fired an event

    Unanswered: Getting reference or Id of the object the fired an event


    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:

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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,602
    Answers
    3448
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    14
    Vote Rating
    0
    kret is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    14
    Vote Rating
    0
    kret is on a distinguished road

      0  

    Default


    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:

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

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,602
    Answers
    3448
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    14
    Vote Rating
    0
    kret is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,602
    Answers
    3448
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Already have the listeners defined in the control section. Then when you create the buttons it will automatically be listened to.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    14
    Vote Rating
    0
    kret is on a distinguished road

      0  

    Default


    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.

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,602
    Answers
    3448
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Set something on the button to tell it what it is.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Sencha User
    Join Date
    Feb 2012
    Posts
    14
    Vote Rating
    0
    kret is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1