PDA

View Full Version : accessing refs from application event handler



EXTraordinary
21 Feb 2014, 6:12 AM
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:

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

Alvaro L
21 Feb 2014, 7:27 AM
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?

EXTraordinary
21 Feb 2014, 8:41 AM
@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 (http://www.vinylfox.com/four-tips-for-staying-on-track-with-scope-in-extjs/) 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();