Enhancing a TabPanel with plugins: The TabScroller menu

The TabScrollerMenu plugin is another example of how to extend a component's features. Used on a TabPanel, this plugin builds a menu that provides easy access to any of the tabs without having to resort to the panel's default tab-scrolling behavior, as seen below:

Getting ready...

Obtain the TabScrollerMenu.js, tab-scroller-menu.gif, and tab-scroller-menu.css files from the Ext JS samples page at http://extjs.com/deploy/dev/examples/tabs/ tab-scroller-menu.html.

How to do it...

1. 1. Create the styles for the button and tabs:

   icon-new-tab
   {
   background:url(img/add2.png) 0 no-repeat !important;
   }
   icon-tab
   {
   background:url(img/star-yellow.png) 0 no-repeat !important;
   }
   

2. 2. Include the styles used in the TabScrollerMenu plugin:

   <link href="tab-scroller-menu.css" rel="stylesheet" type="text/css" />
   

3. 3. Include the TabScrollerMenu plugin file:

   <script src="TabScrollerMenu.js" type="text/javascript"></script>
   

4. 4. Create an instance of...