Extjs 4.0 -> Designer -> Tool -> Events - How?

[tfd]

Using Designer 1.2.2 on Extjs 4.0.7, I added a "Tool" to a panel and set the type to "refresh". I see no way of renaming the Tool or giving it an id. How do I create an onclick event for it?

I would like to use the refresh to trigger a data reload and show a message. But it seems a bit limited.

[aconran]

The tool is a component instance and exposes a click event.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Tool

You can grab a reference to this tool and associate it with teh click event.

[tfd]

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?

[tfd]

guess it can't be done

[aconran]

tfd -

Sorry for the delayed response, we've been on a hard push to get Designer 2.0 beta out the door:
http://www.sencha.com/blog/sencha-de...-announcement/

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!

[tfd]

Wow, that sounds perfect. I'll test it out today.

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.

[Romulof]

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 ?

[aconran]

You will need to get a reference to the tool object and set it through code using Ext Designer.

[Romulof]

How do I get this reference ?

I can't set an ID to the tool in Ext Designer, and in panel.tools only has a list of objects used to create the tools, not the objects references.

[aconran]

They should be instances of the tools once the panel has been rendered. Override afterRender and then grab a reference to them.