PDA

View Full Version : Changing scope of functions called



p0rsche
24 Nov 2011, 3:30 AM
Hy guys!
I think my question is little stupid, but...
I have controller, where I loading view dynamically.

Ext.define('Dashboard.controller.Sessions', { extend: 'Ext.app.Controller',

models: ['UserSession', 'SessionDataM', 'SessionsTreeM'],
stores: ['UserSessions', 'SessionDataS', 'SessionsTreeS'],
views: ['SessionsTreeV'],

/*
* System-inherited methods
*/


onLaunch:function(){
//instantiating sessions tree
this.initializeSessionsTreeView();
},


/*
* User-defined methods
*/
initializeSessionsTreeView: function(){
var sessionsTreeView = Ext.widget('sessionstreev');
sessionsTreeView.on('itemclick', this.handleItemClick);
},

handleItemClick: function(evt, el){
//console.log(this);

el.isLeaf() ? this.showDetailedSessionData(el.data.text) : this.colExpand(el);
}


});

The problem is when I call functions this.showDetailedSessionData and this.colExpand it calls from View instance instead of controller instance (because this refers to view instance).
I've tried to change this to something like this:


var cInstance = Ext.getController('MyControllerName');
el.isLeaf() ? cInstance .showDetailedSessionData(el.data.text) : cInstance .colExpand(el);

but it doesn't work ;(

Now i have this functions in my View file (and it works), but I want to move it to Controller according to MVC principles.

P.S. This is my View file:

Ext.define('Dashboard.view.SessionsTreeV', { extend: 'Ext.tree.Panel',
alias: 'widget.sessionstreev',
store: 'SessionsTreeS',
renderTo: 'sessionsTreeView',
preventHeader: true,
border:0,
bodyBorder: false,
depth: 1,
hideHeaders: true,
rootVisible: false,
height: 500, //TODO flexible height&width to assign big data's'
width: 200,
collapsible: true,
title: 'My Sessions',


//TODO damn move it to controller!
colExpand: function(el){
el.data.expanded ? el.collapse():el.expand();
},

showDetailedSessionData: function(date){
console.log('showDetailedSessionData function called with parameter ' + date);

//loading data into store
var sessionDataStore = Ext.getStore('SessionDataS');
sessionDataStore.setProxy({
type: 'ajax',
url: 'json/getSessionData?date=' + date,
reader: {
type: 'json',
root: 'sessionData'
}
});
sessionDataStore.load(function(records) {
console.log(dump(records));
//enable disabled tabs
var tabBar = Ext.ComponentQuery.query('viewport > maincontent');
for(var i =0; i < tabBar[0].items.length; i++){
tabBar[0].items.items[i].enable();
}

//do some other useful things
});
}
})

Thanks!

p0rsche
24 Nov 2011, 5:10 AM
Adding handlers to init solved my problem:

init: function(){ this.control({
'sessionstreev': {
itemclick: this.handleSessionTreeItemClick
}
});
},