PDA

View Full Version : Toolbar items not being rendered or remembered



steve.brownlee
22 Mar 2012, 7:09 AM
Have a simple test case that has me bamboozled. Here's the truncated, relevant code.

I've got a view with a toolbar control in it.


Ext.define('MyApp.view.organization.List', {
alias : 'widget.organizationToolbar',
extend : 'Ext.toolbar.Toolbar',
title : 'Organizations'
});


In my controller code, I listen for the click event on a test button I threw on the page:


this.control({
'#testButton' : {
click : function () {
var toolbar = Ext.widget('organizationToolbar');
toolbar.add({ text : 'Sample' });
console.log(toolbar.items);
}
});


Every time I click the button, the toolbar.items object that I dump to the console has the button I just added in the array. However, it does not get rendered in the control. Also, no matter how many times I click the button, only one item is in the array.

This seems like it should be simple to do, but apparently what I consider the obvious, logical way to do this is wrong.

Any help on how I can properly add button to my toolbar would be helpful.

mitchellsimoens
22 Mar 2012, 12:32 PM
Ext.widget creates a new component instance so you are creating a new one and adding one item to the new instance. You need to resolve the real toolbar instead of using Ext.widget.

steve.brownlee
22 Mar 2012, 1:38 PM
Thanks for the reply, Mitchell I can't find any examples in the docs as to how to obtain a reference to the existing Toolbar. If you know where this documentation exists, I would greatly appreciate a link. I have a feeling that I'll be bookmarking it.

- Steve

mitchellsimoens
22 Mar 2012, 1:44 PM
It depends where in relation the button being clicked is to the toolbar.

steve.brownlee
22 Mar 2012, 2:01 PM
I realize that may be the case, but I'm also interested in the case where I would want to update/add items to a toolbar independent of a user generated event. For example, a WebSocket event is triggered by my server, and the contents of the message are Toolbar items. I'll want to inject those items into my Toolbar, and, in this case, will not have an ExtJS-generated event to capture that has a reference to an element in the DOM.

Perhaps I should just do an Ext.getCmp() call and incur all of that overhead. It may be expensive, but it gets the job done - at least I think it will. I'll need to test.

Thanks again for the reply.

skirtle
22 Mar 2012, 3:41 PM
Given you're using the MVC you may want to consider using refs. See the section 'Using refs' in this docs page:

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