While the Paging Toolbar class was introduced in Ext 1.0, it has changed little to the users all the way up to 3.0 as we know it.  In Ext 2.0, the Progress Bar class was introduced.  A couple of days ago, I posted on the Ext JS forums about this idea and got some good responses, so I decided to finalize the 2.2 extension, Ext.ux.plugins.progressPagingToolbar.  Yes, I know it’s an ugly  name.

MJ Lecomte, a great and active community member, suggested a plugin instead of an extension for Ext 3, which made a whole lot of sense.  So, I created the plugin for the Ext 3.0 branch, which I’m working to get submitted as example code for the Ext JS SDK, much like I did for the 2.2 release (See “Advanced Drag and Drop Examples”).  I cannot link to the private beta link for the plugin until Ext 3 is generally available (GA).

Download: zip (contains related javascript);

Example page: http://tdg-i.com/js/examples/ext/tdgiux/progressPagingToolbar/

Example usage:

Shea Frederick is launching a new JavaScript user Group in Baltimore with monthly meetings designed to share knowledge and ideas with various frameworks. We will meet n Tuesday, February 3, 2009, at 7PM at OmniTI’s campus:

# 7070 Samuel Morse Dr Ste 150
Columbia, MD

I will kick off the meetings with Ext JS and the following topics.

Ext.onReady

• Why do we need it
• how to use it

Components:

• XTypes and how they speed up Ext Development
• Component LIfecycle
  • Initialization Phase
  • Render Phase
  • Destruction Phase
• Using the Component Manager to obtain references out of scope

I will try to record the presentation and post a video on this site and http://extjs.com/learn.

We will have free Food and Beverages for the attendees.

Hope to see you there!

Click the image below to see a demonstration on the animated dock class.

Updated with the following items:
Tab scroller menu now accepts a config parameter:

+ maxText // elipsis, thanks mystix
+ pageSize // custom page size , thanks condor

New features/bug fixes:
+ iconCls now transferred from tab to menu
+ strip-wrap CSS override nolonger required
+ menu automatically hides and shows with the scroll left button hide call.
+ getter and setter methods for maxText and pageSize

Download: zip (contains related CSS and images);

Example page: http://tdg-i.com/js/examples/ext/tdgiux/tabScrollerMenu/

Example usage:

I was writing about the limitations Tab Display Interface (TabPanel) and I wondered how we could make it better. It dawned on me that we should be able to easily add a menu to the right of the scroll-right buttons. So, I launched photoshop, and modified the existing scroll-right menu sprite (enlarged):

Next, I needed to come up with a solution on how to inject that sprite into the tab panels’ stab strip. I started by creating a bunch of CSS overrides and Ext.TabPanel overrides. This clearly was not the best solution, as I thought it would be best to give developers the choice on whether they want to use it or not. I then transformed things into an extension. That didn’t work well because the CSS overrides were still in place. So, I decided to transform it again into a plugin, and this is where it really shines!

Download: zip (contains related CSS and images);

Example page: http://tdg-i.com/js/examples/ext/tdgiux/tabScrollerMenu/

Example usage: