Calling a view's method from a controller

[antun]

I'm very new to Sencha, so I don't know if I'm running into a bug here or doing something wrong. I want to define a method (function) on a view, and call that function from a controller. I assumed that I was supposed to use Controller.getView() (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller-method-getView) to get a reference to the view, but it doesn't appear to work.

Here's my view code:



Ext.define('SFC.view.flashcard.Show' ,{
extend: 'Ext.container.Container',
alias : 'widget.flashcardshow',


layout: 'fit',


title : 'Flashcard TODO',


store: 'SpanishWords',


items : [
{
itemId: 'flashWord',
xtype: 'panel',
layout: 'fit',
title: 'Spanish Flashcards',
html: '<div style="display: table-cell; vertical-align: middle;">palabra</div>',
bodyStyle: 'text-align: center; display: table; font-size: 96px; background:#ffc;',
tools: [
{
xtype: 'button',
action: 'next',
text: 'Change word',
scale: 'large'
}
]
}


],


initComponent: function() {
this.callParent(arguments);
},


updateWord: function(newWord) {
// Function I'm trying to call
console.log("updateWord", newWord);
}
});


Here's my controller code:



Ext.define('SFC.controller.Flashcards', {
extend: 'Ext.app.Controller',


views: [
'flashcard.Show'
],


stores: [
'SpanishWords'
],


init: function() {
console.log('Initialized Flashcards! This happens before the Application launch function is called');
this.control({
'viewport > panel': {
render: this.onPanelRendered
},
'button[action=next]': {
click: this.doNextWord
}
});
},


onPanelRendered: function() {
console.log('The panel was rendered');
},


doNextWord: function() {
var words = Ext.data.StoreManager.getByKey("SpanishWords");
var i = Math.round(Math.random() * (words.getCount()-1));
var nextWord = Ext.data.StoreManager.getByKey("SpanishWords").getAt(i).get("word");
var v = this.getView('flashcard.Show');
console.log(v);
v.updateWord("blah");

}
});


The getView('flashcard.Show') does appear to return something, but I can't seem to call updateWord on it. The reason I can tell that it is returning something is that fi I change the viewName to something that is not specified in the controller (e.g. "foo") the result is undefined.

The console.log(v) line outputs the following in Chrome. (Like I said, I'm new to Sencha, so any tips on how to serialize this output into something more specific would be appreciated. I searched, but couldn't find any way to serialize an object to provide more useful debug info):

function constructor() { return this.constructor.apply(this, arguments) || null; }

I'm using ext-4.1.1a.

Thanks in advance for any help!

-Antun

[vietits]

<controller>.getView(className) will return the view class, not a view instance. Below is one of some solutions to fix your problem. You can also use some other solutions such as using refs config, Ext.ComponentQuery.query(), etc.


...
doNextWord: function(button) {
var words = Ext.data.StoreManager.getByKey("SpanishWords");
var i = Math.round(Math.random() * (words.getCount()-1));
var nextWord = Ext.data.StoreManager.getByKey("SpanishWords").getAt(i).get("word");
//var v = this.getView('flashcard.Show'); <- this returns flashcard.Show class
var v = button.up('flashcardshow'); // <- this returns flashcard.Show instance that contains the clicked button
console.log(v);
v.updateWord("blah");
}
...

[antun]

Thanks for the quick reply! That worked for me.

Are there some docs on the various ways a Controller can talk to a View? I understand what's happening here, just wondering what my alternatives are. Is the approach you posted the most commonly-used pattern?

[vietits]

To get reference to a view from controller, you can use some other ways, such as:
- using refs (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller-cfg-refs) config in controller.
- using Ext.getCmp(componentId) (http://docs.sencha.com/ext-js/4-1/#!/api/Ext-method-getCmp).
- using Ext.ComponentQuery.query(selector, root) (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery-method-query)

[antun]

Thanks for the info!