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

Javascript: ExtJS Image Effects Example

No Comments

I have been working with ExtJS library, a free very useful javascript library.  It is rather heavy due to it's size but has many great things built right into it.  You can check out for yourself above and look at some of the visual examples they have posted on the site.  That being said I have been working on my own experimentation (rather simple at the moment) for use in one of my own personal projects.  One particular issue I looked into was element handling and their FX library.

I have seen some fancy photo galleries out there well I wanted to just create a simple effect to get my hands a little dirty.   The code you see below utilizes a few different aspects of ExtJS Core library.

I will not go into great details about how the code works because its not too hard to follow. If anyone has questions post it in the comments and I will do what I can to help though I am guessing most will just read or copy/paste and mess with it on their own.

Just click the image in the demo to see it work.

** Please do not link to my site to get the extjs libraries download them and install locally or on your own server. I have basic hosting and do this as a hobby and if you are getting significant traffic it could slow my site down.

You can see this working here Simple Image Rotate Example

  <body class="ext-gecko ext-gecko3" style="background-color: black;">
  <style>
   #box {
     width: 125px;
     height: 125px;
     background-color: white;
     position: absolute;
     left: 200px;
     top: 100px;  
      overflow: hidden;
      border: 1px solid red;
      cursor: hand; cursor: pointer;   
   }
   
   #box2 {
     width: 50px;
     height: 50px;
     background-color: white;
     position: absolute;
     left: 100px;
     top: 100px;  
      border: 1px solid red;
      cursor: hand; cursor: pointer;      
      opacity:0.25;
      filter:alpha(opacity=25);
   }
   
  </style>
  <div style="left:0px; top:0px; width: 800px%; height: 800px;" id="plane">   
       <img src="images/images.jpg" align="middle" id="box">
       <img src="images/images2.jpg" align="middle" id="box2">
  </div>
  <script language="javascript">
  ImageRotate = Ext.extend(Ext.util.Observable, {
      constructor: function(oConfig){
         this.name = oConfig.name;
         this.listeners = oConfig.listeners;
         
         this.addEvents({
            "summon_new": true
         });
 
         this.elBox = Ext.get("box");
         this.elBox2 = Ext.get("box2");    
   
         this.elBox.on('click', function(e, t, o){          
            this.elBox.shift({
               opacity: .25, 
               duration: 1,
               easing: 'easeOut',
               x: this.elBox.getX() + 150,
               y: this.elBox.getY(),
               height: this.elBox.getHeight() * .50,
               width: this.elBox.getWidth() * .50
            });
         
            this.fireEvent("summon_new");
         }, this);
         
         ImageRotate.superclass.constructor.call(oConfig);  
         
         this.on("summon_new", function(){
            this.elBox2.shift({
               opacity: 1, 
               duration: 1,
               easing: 'easeIn',
               x: 200,
               y: this.elBox.getY(),
               height: 125,
               width: 125
            });
         });                
      }   
  });  
  
  Ext.onReady(function(){
      oImageRot = new ImageRotate({ name: 'image_test' });
  });   
  </script> 
</body>

Tags: code example, ExtJs, fade out image, image effect, image gallery, Javascript