Enhancing a TabPanel with plugins: The Close menu

This is another example of extending a component's features. Here, you'll use the TabCloseMenu plugin to add a Close menu to the tabs in a TabPanel. This menu allows the user to close either the selected tab, or all the tabs but the selected one, as seen in the following screenshot:

Getting ready...

In order to use the TabCloseMenu plugin, you need to locate and include the TabCloseMenu.js file. The TabCloseMenu.js file can be obtained from this book's sample code.

How to do it...

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

   <style type="text/css">
   .icon-new-tab
   {
   background:url(img/add2.png) 0 no-repeat !important;
   }
   .icon-tab
   {
   background:url(img/star-yellow.png) 0 no-repeat !important;
   }
   </style>
   

2. 2. Include the TabCloseMenu.js plugin file:

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

3. 3. Define the TabPanel and assign an instance of the TabCloseMenu class to the plugin's config object:

   Ext.onReady...