carters-site.net

ExtJS 2+ Navigation Plugin for creating simple site navigation.

No Comments I use the ExtJS library a lot. In using the library I found in 3.0 they support a grouptab panels. Unfortunately, I am still working on 2.2 and needed a similar solution that is compatible with both ExtJs 2.2 & Ext 3.0. My goal was to build a clean navigation similar to ExtJS 3.0 groupTabPanel option. What I came up with was small extension on the library that works with Ext2.2+ and will allow me to upgrade later without having to change any code. Below you an see an image of the example of NavPanel my first ExtJS extension. It allows for some basic formatting of the menu display including left, right, center.  Each navigation item will automatically adjust itself when group under the same NavPanel object.

Features

• Clean/Fast Navigation creation with minimal code.
• Can support multiple navigation panels on same page each target to different Panel.
• Supported by ExtJS 2.2+
• Syntax similar to other Ext Objects.
• Menu layout adjustable (including icon positioning)

Usage
Here is a simple code example usage of the extension:

  Basic Example Usage

     viewPt = new Ext.Viewport({

        layout: 'border',

        border: false,

        items: [{

           xtype: 'panel',

           region: 'west',

           border: false,         

           bodyStyle: 'background-color: rgb(40, 120, 50);',

           width: 200,

           items: [{

               xtype: 'navpanel',

               width: 150,

               panelXAlign: 'right',

               yOffset: 10,

               menuItemAlign: 'left',

               activePanel: true,

               target: 'centerpanel',

               defaultItem: 1,

               items: [{

                  header: true,

                  text: 'My 1st ExtJS Ext',

                  iconCls: 'myspecial_header'                                                              

               },{

                   text: 'Ext.ux.NavPanel',

                   icon: 'asterisk_yellow.png',

                   items: [{

                     xtype: 'panel',

                     width: 500,

                     height: 200,

                     style: 'padding: 10px;',

                     title: 'Sample Panel',

                     html: 'something special'                                          

                   }]                                    

               }]

           }]     

        },{

            xtype: 'panel',

            id: 'centerpanel',

            style: 'padding: 10px',

            height: 500,

            width: 600,

            border: false,      

            region: 'center'     

       }}

     }); 

Files
This zipfile contains all the resources used in the included example file (example.html) and the NavPanel.js file itself. I did not minify the file and the code is commented to aid you along your way. navpanel.zip

Example:
Here is a link to the example I put together demonstrating some of the different layouts and targeting. navpanel example

Terms
Feel free to download and use however you want to.  Realize this is my first true ExtJS extension built from scratch so there may be bugs that need addressed.  Feel free to point them out and I will fix as time allows.  All I ask if you do use this particular extension is that you leave a comment on this page on how you intend to use it or where you are going to use it, this is for my own curiosity. Enjoy!

Changelog
Feb 17 2010
** Fixed Bug with NavPanel Z-Index causing it to bleed through parent windows and masks.

Tags: coding, custom extension, example code, ExtJs, file download, Javascript, javascript navigation, programming, software