ExtJs - Adding tools dynamically to ExtJs Panels

Second consecutive blog post relating to adding something dynamically to an already rendered Html component, while the previous one was for adding buttons dynamically to jQuery UI dialogs here, this one is for adding tools dynamically to ExtJs Panels.

Tools on ExtJs PanelsAs you might be knowing, tools are small icon-only buttons rendered towards the right of an ExtJs Panel title that come in handly for executing custom operations (similar to Minimize/Maximize/Close buttons in a regular Desktop window, you can specify any number of tools for your panel, and you can control the action executed when a tool is clicked).

Well according to ExtJs docs, tools can only be specified in the config options for the Panel, but cannot be added dynamically. But I needed to add the tool dynamically to the Panel, as the Panel was already instantized and shown from another portion of the application code, that I did not want to be modified.

One option could be to add the tool to config options itself with its visibility as hidden and then show it as required. But as I said, I needed to add it dynamically to a rendered Panel because the code which actually instantized the Panel existed in another portion of the application that was frozen.

ExtJs docs do not specify a method available for this purpose, but having a look at ExtJs Panel class' source code, I spotted the addTool method (which has been marked as private in the Panel class), and observed that tools specified in the config options for the Panel also get added one-by-one by repeated calls to this method.

A quick look at the method code made me believe that this method can be safely called after the Panel has been rendered and would behave as expected by adding the tool at the end of the already rendered list of tools.

Upon testing, it worked as expected and I wondered why this method has been marked as private when it can be used conveniently at run-time to manipulate tools for a Panel.

The example below would allow you to perform all manipulations for a Panel tool (including adding, removing, showing and hiding tools):


The source for the example is attached below.

Notice we can only add a tool at the end of the current tools list with this method. If you want to insert it somewhere in between the existing tools, you can either create a new method let's say insertTool and use the code of the addTool method as guidance to insert dom for the new tool at an appopriate position or use addTool itself to add the tool at the end and afterwards manipulate the tool's dom to move it at an appropriate position (Ext.DomHelper should come in handly for both options).


HTML icon extjs-panel-add-tool.htm2.08 KB


Thanks a lot. That's exactly I was looking for a long time!!! Smile

I was close. I found the method addTool, but could not get it to work. Found your article and my panel is now a happy panel. Thank you.

I am following your example, but for some reason the tool icon does not show up. The button seems to be there and is clickable, but there is no "?" icon for the help tool.

Do you have ideas why this could happen?

Thanks in advance!

rahul's picture

Hi Brian, do you mean on this page or in your installation. If you mean this page, then I can see the icon. If you mean your local installation, it could be due to the missing image sprite (resources\images\default\panel\tool-sprites.gif). I would check to see if the image resources are in their expected location in your installation.

Yes I was using your example to create my own, and I believe I don't have the images in the right place, I will work on it, thanks!

Hola! I've been following your website for a while now and finally got the bravery to go ahead and give you a shout out from Houston Texas! Just wanted to tell you keep up the great work!

Very thanks Rahul!!

really it worked for me

Hi Rahul.. it is very useful tips from you... Now I just looking for how to positioning the tools button in the panel?  I want to put some tools in the left side of panel, I try to use css, but its only work for 1 tool only, when I put another tool there it will piled on top of each other :(

rahul's picture

Well like you mentioned, it has to be done using css. I haven't tried doing that myself, and owing to my current schedule won't be able to in near future.