Results 1 to 10 of 10

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

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    14
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    14
    Vote Rating
    0
      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
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    14
    Vote Rating
    0
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    14
    Vote Rating
    0
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    Set something on the button to tell it what it is.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  10. #10
    Sencha User
    Join Date
    Feb 2012
    Posts
    14
    Vote Rating
    0
      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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •