View Full Version : Adding a dynamic generated item on a view (from it's controller) which is a toolbar

20 Dec 2011, 6:16 PM
I'm having problem with a "stupid" part of the code which, for me, should works straight but I don't understand why it's giving me problems:


Ext.define('FedertrekDesktop.controller.Taskbar', {
extend: 'Ext.app.Controller',

views: [

showWindow: function(windowName, image, title) {
//var btn = Ext.create('FedertrekDesktop.view.taskbar.Button', windowName, image, title);
//this.getView('taskbar.Toolbar').insert(0, btn);
console.log("tmp: "+this.getView('taskbar.Toolbar').printMsg());
//console.log('msg: '+this.getView('taskbar.Toolbar').getName());
console.log('Create window '+windowName+' '+image);


Ext.define('FedertrekDesktop.view.taskbar.Toolbar', {
extend: 'Ext.toolbar.Toolbar',
alias : 'widget.taskbartoolbar',

items: [
xtype: 'tbfill'
xtype: 'tbseparator'
xtype: 'button',
enableToggle: true,
text: 'Tasks'

printMsg: function() {

Actually I'm just testing by trying to call that custom function (printMsg). However it seems that the function is missing, I don't really understand why. What am I missing here?

ERROR: this.getView("taskbar.Toolbar").printMsg is not a function

20 Dec 2011, 8:44 PM
getView will return the class, not an instance.


21 Dec 2011, 4:22 AM
How am I supposed to access to a view controller by the controller (in views array)? (Thanks for the previous answer by the way)

21 Dec 2011, 1:04 PM
For attaching listeners you'd use the control method. For everything else you can just use component queries to grab what you need.

Your question doesn't entirely make sense to me. Controller code doesn't run at random, something must instigate it. Grabbing suitable components should be relative to the context of that method call. So, for example, if a method is called as the handler for a button click then grabbing the button's surrounding panel is a component query up from the button.

21 Dec 2011, 1:26 PM
Mh sorry I'm probably having difficulties in explain what I'm trying to achieve.

I already find (and use) the control method (actually the showWindow function is called from another controller in response to an event, quite complicated to explain).

I'm proposing an example so:
Imagine I have a Toolbar (view) with a button called "FireButton" as an item, and a controller called ControllerToolbar which hooks for click event of FireButton.

After someone click on FireButton, the controller function called FireButtonHandler is called. Now in this function I would like to add a new Button called WaterButton to my Toolbar. Is this possible? How to do this?

21 Dec 2011, 2:25 PM
So assuming you have something like this:

firebutton: {
click: this.fireButtonClickHandler


fireButtonClickHandler: function(btn) {
var toolbar = btn.up('toolbar');

toolbar.add({xtype: 'waterbutton'});

Does that give you what you want?

That example shows what I meant by 'context'. The handler is called in the context of a particular button, passed as an argument. That button has a toolbar, which you want to change. This is different from the problem of just grabbing all the toolbars (views) for the controller.

21 Dec 2011, 3:01 PM
Well through your example I understood the problem (yea you solved it even if the example is different). Infact, It's my responsability to keep references (in some way) to my "views" (like buttons); the framework doesn't do it for me automatically.

Thanks a lot, that solve my problem. I understood also the concept of the context, but I solved the problem by adding my taskbar to refs (they are really nice!).

21 Dec 2011, 3:49 PM
Yeah, sorry I should have mentioned refs sooner. refs are like a cached component query. They're fine so long as you only have a single instance of whatever it refers to. If you have multiple instances, such as two FireButtons in two different toolbars, then refs struggle a bit. That's where the context of 'which button' kicks in.