View Full Version : Changing scope of functions called

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

//instantiating sessions tree

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

handleItemClick: function(evt, el){

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,
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');
type: 'ajax',
url: 'json/getSessionData?date=' + date,
reader: {
type: 'json',
root: 'sessionData'
sessionDataStore.load(function(records) {
//enable disabled tabs
var tabBar = Ext.ComponentQuery.query('viewport > maincontent');
for(var i =0; i < tabBar[0].items.length; i++){

//do some other useful things


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

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