From the api, I can clearly see how this would be achived if I was not using the designer.
Unfortunately that does not help a lot when using the designer to create .ui.js which gets overwritten everytime you save.
Would you please give me an example of how to get a reference to the tool or how to add a click event for it in the .js file created by the designer where there doesn't seem to be a way of accessing it?
I highly recommend taking Designer 2.0 for a spin as this task is far easier now. To add a click event handler to a tool in Designer 2.0 you can do the following.
1) Start an Ext 4.x project
2) Add a Panel to your canvas
3) Add two tools to the Panel
4) Change one of the tools from the default to a "type" of your choice (configured in the property grid)
5) Click the Events tab in the bottom right hand side
6) Click the Add button to the right of the "click" event
You can do this for both tools and it will generate the proper source code to bind event listeners to the tools. You can then double click on the event handlers in the Project inspector tree to edit the action you'd like to perform.
You will notice that the designer will pre-populate the set of arguments that this method will be invoked with.
If you need any additional guidance, please let us know!
As a side note, you guys are doing excellent work. Must say you are bringing web development out of the stone ages. As a previous desktop developer, I've been spoilt with the power that visual and rad tools such as Delphi provides and have always seen the "text-based" coding of web dev as ancient.
I understand how this work in Sencha Designer. But what about Ext Designer ?
I can't configure a handler nor set an ID to the tool, so the only way to assign an action to the tool button is hacking thru Ext internal components ?