Results 1 to 3 of 3

Thread: accessing refs from application event handler

  1. #1
    Sencha User
    Join Date
    Feb 2014
    Posts
    3
    Answers
    1

    Default Answered: accessing refs from application event handler

    I have some experience with EXTjs 3, but not much with version 4, and I'm trying to follow the new MVC structure.

    I have a button from one view that wants to affect something in another view. No big deal.



    So, the controller for the first view gets the click event, reads data from the view, and sends an application event to the other controller. So far, no problem.
    But, in the destination controller, the application event handler has the wrong "this" pointer, and cannot access the generated method from the refs: {} object, so it cannot get the view (unless I use an Ext.ComponentQuery.query( selector).
    If I set "this" global in the init (e.g. me=this; //instead of var me=this ) I can reference the refs:{} in the handler, but I don't want to set it global, just class wide. Right?


    What's the right way to do this?

    ex:
    Code:
    Ext.define('myapp.controller.EventList', {
        extend: 'Ext.app.Controller',
    
    
    //I want to use the "refs" attribute to ref tab panel, but in handler function, it has the wrong "this", so
    //  this.getTabPanel() fails with "no such method".  Init function can post me global --instead of var me = this, 
    //  just me = this and then use var tabs = me.getTabPanel(); in handler,
    //  but I'm not sure how big the scope is (although it works).
        refs: [{
            ref: 'tabPanel',
            selector: '#EventListTabs'
        }],    
        
        init: function() {
            var me = this;  
                    
            me.application.addListener({ 
                'addNewTabEvent' : this.addNewTabEvent, 
            });
            
            me.callParent(arguments);
        },
        addNewTabEvent: function( formFields ){
    
    
            var tabs = Ext.ComponentQuery.query('#EventListTabs')[0];
            var newTab = Ext.create( 'myapp.view.EventListTab', {
                filter:formFields
            });
            tabs.add( newTab );            
        }
    });
    Last edited by EXTraordinary; 21 Feb 2014 at 6:19 AM. Reason: it took a semi-colon and parenthis and made a wink when it wasn't.

  2. @Alvaro. You gave me enough info to figure this out. While searching for how to do add params to the handler, I found scope. Many thanks to this site for a great explanation.


    I changed my listener function code to:
    me.application.addListener({
    'addNewTabEvent' : this.addNewTabEvent,
    scope: this // ADD THIS LINE
    });


    and then in the handler, you can use the ref link instead of ComponentQuery.


    var tabs = this.getTabPanel();

  3. #2
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    15

    Default

    I don't know if I have really understood the problem, but can't you just send the view as an argument to the addNewTabEvent?

  4. #3
    Sencha User
    Join Date
    Feb 2014
    Posts
    3
    Answers
    1

    Default This is how to get the this in the handler.

    @Alvaro. You gave me enough info to figure this out. While searching for how to do add params to the handler, I found scope. Many thanks to this site for a great explanation.


    I changed my listener function code to:
    me.application.addListener({
    'addNewTabEvent' : this.addNewTabEvent,
    scope: this // ADD THIS LINE
    });


    and then in the handler, you can use the ref link instead of ComponentQuery.


    var tabs = this.getTabPanel();

Tags for this Thread

Posting Permissions

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