PDA

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



Fire-Dragon-DoL
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:

Controller

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

views: [
'taskbar.Toolbar',
//'taskbar.Button'
],

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

View


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() {
console.log("printmsg");
}
});

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

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

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Controller-method-getView

Fire-Dragon-DoL
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)

skirtle
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.

Fire-Dragon-DoL
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?

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


this.control({
firebutton: {
click: this.fireButtonClickHandler
}
});

Then:


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.

Fire-Dragon-DoL
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!).

skirtle
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.