I recently spent some time on the TDGi.PanelHeaderToolbar plugin and thought I should share it.

I’m currently working on the following features:
- Animated Collapse <-- Works
- Showing Raw buttons (option) <- breaks auto sizing, need to investigate
- Add "collapse header toolbar" tool (matches feature from OS X) <- still under conceptuliaztion

Known issues:

- not fully compatible with IE7 & IE8 – surprised?
- Shadow for window out of sync.
- Expand/Collapse animations are not fully functional.

- Focus for input boxes doesn’t fully work, one can initiate drag. This will be a fun one to overcome.

Click here for a quick demonstration: http://tdg-i.com/js/examples/ext3/plugins/panelheader/.

Also, I have another example here using the border layout: here.

Click here to download the source.

Below is a quick demonstration on a new Keyboard nav handler for the Ext JS Menu system that I’m working on. I would like any and all opinions.

The purpose of this post is to provide a quick update on the progress of the HeaderToolbar plugin.

I’m currently working on the following features:
- Animated Collapse
- Showing Raw buttons (option)
- Add “collapse header toolbar” tool (matches feature from OS X);

Known issues:
- not fully compatible with IE7 & IE8 – surprised?
- Shadow for window out of sync.
- Expand/Collapse animations are not fully functional.
Click here for a quick demonstration: http://tdg-i.com/js/examples/ext3/plugins/panelheader/

To those of you who question the need or desire for such a plugin, take a quick look at Windows and OSX panels as exhibit the same features.

Windows Vista/7

OS X

Here is a quick preview of the ‘HeaderToolbar’ plugin that adds some functionality to the Panel and Window classes of the Ext JS framework that mimic OS X window/panel Top Toolbar. I’m looking for any comments/suggestions/etc. I cannot release code until I get confirmation from Ext JS, LLC that I can do so, as I have to modify and distribute overrides for the Window and Panel classes.

Header Toolbar

As an update to my previous Adding animation to the ux.ProgressPagingToolbar, I’ve taken SysCobra’s example code and refactored it to work with the Ext 3.0 plugin and not use static Ids.

Example page: http://tdg-i.com/js/examples/ext3/plugins/pagingToolbar/

Download: zip (contains related javascript);

Example usage: