How to add Tools dynamically in an Ext Js window?

Question

I wanto to add a tool (search, help, gear, ...) in a window dynamically, like this: http://www.rahulsingla.com/sites/default/files/content/blog/extjs/extjs-panel-add-tool.htm

And I need to create more than one instance of UIMyWindow at the same time.

However, I'm using Ext Designer which generates 2 files:

• MyWindow.ui.js: class declaration.
• MyWindow.js: methods implementation.

Besides Ext Designer hasn't an option Tools at design time (I didn't find).

I was adding the tool outside MyWindow.js and MyWindow.ui.js, like this:

var winMyWindow = new UIMyWindow({
    autoShow: 'true', 
    tools: [{
               type:'gear',
               handler: function(){
                   // Some code...
               }
    }]
});

But I want to put this block inside MyWindow.js. So, I did this:

UIMyWindow = Ext.extend(UIMyWindowUi, {
    tools: [{
               type:'gear',
               handler: function(){
                   // Some code...
               }
    }],

initComponent: function() {
   UImenuDock.superclass.initComponent.call(this);

If you ask me "Why not to put this code inside MyWindow.ui.js?", I would answer "because I don't want to put this code manually every time I make changes in the design file (Ext Designer)".

Well, if I open one window, it's seems work ok, but if I open a second at the same time, the tools are duplicated in the second window...

So, any idea how to add tools dynamically in MyWindow.js in this specific case?

Answer 1

put 'tools' into initComponent

UIMyWindow = Ext.extend(UIMyWindowUi, {  

initComponent: function() {
  this.tools = [{
               type:'gear',
               handler: function(){
                   // Some code...
               }
    }], 
  UImenuDock.superclass.initComponent.call(this);