Results 1 to 6 of 6

Thread: Toolbar button listener

  1. #1
    Sencha User
    Join Date
    Apr 2008
    Location
    West Linton, Scotland
    Posts
    244
    Vote Rating
    0
      0  

    Default Toolbar button listener

    I am trying to understand better how scope and events work
    I am able to get this working but I was wondering if this was the correct approach?

    I have set up a toolbar as a preconfigured class that loads in the north region of my viewport
    I have attached a listener to the "search" button on the toolbar.
    This is how it is set up and is currently working

    Code:
                        xtype:'button'
                        ,iconCls:'search'
                        ,text:'Search'
                        ,listeners:{'click':AF.module.displayResults,'scope':AF.module}
    I have a function in my module "AF.module" that handles the event

    Code:
    AF.module = function(){
        
        //closure that will return viewport
        //will also return public methods
        //in here I aim to handle AJAX connections and events on sub components
        
        //private vars in here
        
        //private methods here
        
        return {
            
            displayResults: function(e){    
                
                if(e.text.toLowerCase() == 'search'){
                    Ext.Msg.alert('picked up the event from: ' + e.text);
                }
            }
                
            ,init: function(){
                new Ext.Viewport({
                  ..................
            }    
        }
    }();
    My aim is to follow have all events between different components centralised
    Is this a good approach and referencing the event handler like AF.module.displayResults the correct waay to do this
    Sorry I am stumbling around a bit but wanted to get some input before I carried on with setting up other event handling like this

  2. #2
    Sencha User
    Join Date
    Apr 2008
    Location
    West Linton, Scotland
    Posts
    244
    Vote Rating
    0
      0  

    Default

    I will try again on this one
    I have a pre configued class that is a ToolBar and within this toolbar I have a toolbutton that has a listener attached

    Code:
                        xtype:'button'
                        ,iconCls:'search'
                        ,text:'Search'
                        ,listeners:{'click':AF.module.displayResults,'scope':AF.module}
    The pre configured class is an xtype within the north region of the viewport which is rendered through the init function
    I have a listener on the button that I can only get to work by fully referencing the function
    i.e AF.module.displayResults
    I at one point had this thinking that if I changed the scope then I would be able to do this
    Code:
    ,listeners:{'click':this.displayResults,'scope':AF.module}
    I have got it working with the full reference but I was wondering if someone could educate me on this bit. Although I got it working I don't fully understand it.
    Any feedback is much appreciated

  3. #3
    Ext User
    Join Date
    Apr 2008
    Posts
    112
    Vote Rating
    0
      0  

    Default

    The scope property will set the scope for the handler at the time it gets called. However, you're using 'this' while you're defining your listener, not at call-time. That's why it wouldn't work. It's impossible to tell what 'this' is referencing without seeing the function in which it is being called or even the code that is calling that function (because as we all know javascript allows you to modify the scope in which a function is called). I try to avoid 'this' anytime I can unless it's in very specific instances in which I know for sure what it will be.

    The short answer: this refers to the function in which it is referenced, unless the function's caller decides to specify a different scope, in which case this refers to that instead. This is one of the uglier aspects of javascript, in my opinion.

  4. #4
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    The scope parameter is only defining what the scope context will be once inside that function. You still have to call that function. How you call the function, or get a reference to it, is separate from the scope inside that function.

  5. #5
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    Quote Originally Posted by andycramb View Post
    My aim is to follow have all events between different components centralised
    Is this a good approach and referencing the event handler like AF.module.displayResults the correct waay to do this
    Sorry I am stumbling around a bit but wanted to get some input before I carried on with setting up other event handling like this
    To each their own on how you set up your app. I think I've more typically seen organizing code by purpose though. Code to an interface (not an implementation) I think the saying goes in OO patterns. Your example closure/singleton seems to have a hodge podge of methods so I don't quite get what you're after in particular. You mention "events" but I didn't pick up on any events per se (perhaps your terminology was used a bit loosely?). I do think it's a good idea to attempt to centralize some events. I set up an application controller that extends Observable so I can also fire events from a central location as well as listen to them.

  6. #6
    Sencha User
    Join Date
    Apr 2008
    Location
    West Linton, Scotland
    Posts
    244
    Vote Rating
    0
      0  

    Default

    @BernieM

    Thanks for the response
    Yes I can see that now that the scope is being set on click and not when its initially defined
    I will take your advice and steer clear of "this" until I get a bit more exposure

    @MJ

    Thanks for getting back to me
    I have 2 methods in the singleton
    init() - displays the UI
    displayResults() - my aim was for this method to handle all ajax events and then pass the response on to other methods depending on the event object/UI element or the response
    When I say response I was thinking of passing any errors to a generic error handler method
    Initially I was trying to base it on Saki's inter component comms example but I did not fully get it so I was looking for some more input, hence this thread
    I was also basing my application appoach on the post you did but got a bit lost when thinking of the best way to handle events across different UI elements http://extjs.com/forum/showthread.ph...ad.php?t=18435

    Do you have any examples or threads where this is documented

    I set up an application controller that extends Observable so I can also fire events from a central location as well as listen to them
    Its probably too early for me to pick up but I can work towards it
    Thanks again

Posting Permissions

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