ExtJS 4.1 - How to add items to toolbar dynamically?

Question

I'm trying to minimize windows as a button at a taskbar - which is actually a toolbar but I couldn't add button dynamically to the taskbar. I tried calling doLayout() function but it didn't work either.

Here's what I tried - any help will be appreciated a lot!

Thanks in advance.

<script type="text/javascript">
     this.addListener('show', function(win) {
          taskbar.add(me.taskButton);
          taskbar.doLayout();
     });
</script>

Variables :

win : The window that will be minimized
taskbar : A toolbar that is rendered at south region of my viewport

It should work fine with just add. I would look into how the listener is getting attached, inspect the DOM in firebug (or equivalent) and verify that it is getting attached. Also what does your taskButton config look like? Is the taskButton getting created with Ext.create before you are trying to add it to the toolbar? — egerardus
Thanks for your interest, taskButton is a simple Button component: this.taskButton = Ext.create('Ext.button.Button', { text : me.title, handler : function(btn) { me.show(); } }); I create it inside of window definition(in initComponent function) but it's not important at all.. I can define them one by one. The way to add items dynamically to the toolbar is enough for me. — talha06
Is your event handler getting fired? Try adding console.log(win) in the function and see if anything comes out when you show your window. — egerardus

Lionel Chan Lionel Chan · Accepted Answer · 2012-06-23T13:14:15

I'm very sure that you do not need to do doLayout when you use component add. The framework already do the rendering for you so there is no need to do the doLayout again.

I suspect that your event listener is not being attached correctly. Check out my working example as below:

http://jsfiddle.net/chaoszcat/sHrGH/

ExtJS 4.1 - How to add items to toolbar dynamically?

1 Answers