examples/shared/extjs/site.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8
   9         var activeMenu;
  10
  11         function createMenu(name){
  12                 var el = Ext.get(name+'-link');
  13                 var tid = 0, menu, doc = Ext.getDoc();
  14
  15                 var handleOver = function(e, t){
  16                         if(t != el.dom && t != menu.dom && !e.within(el) && !e.within(menu)){
  17                                 hideMenu();
  18                         }
  19                 };
  20
  21                 var hideMenu = function(){
  22                         if(menu){
  23                                 menu.hide();
  24                                 el.setStyle('text-decoration', '');
  25                                 doc.un('mouseover', handleOver);
  26                                 doc.un('mousedown', handleDown);
  27                         }
  28                 };
  29
  30                 var handleDown = function(e){
  31                         if(!e.within(menu)){
  32                                 hideMenu();
  33                         }
  34                 };
  35
  36                 var showMenu = function(){
  37                         clearTimeout(tid);
  38                         tid = 0;
  39
  40                         if (!menu) {
  41                                 menu = new Ext.Layer({shadow:'sides',hideMode: 'display'}, name+'-menu');
  42                         }
  43                         menu.hideMenu = hideMenu;
  44
  45                         menu.el = el;
  46                         if(activeMenu && menu != activeMenu){
  47                                 activeMenu.hideMenu();
  48                         }
  49                         activeMenu = menu;
  50
  51                         if (!menu.isVisible()) {
  52                                 menu.show();
  53                                 menu.alignTo(el, 'tl-bl?');
  54                                 menu.sync();
  55                                 el.setStyle('text-decoration', 'underline');
  56
  57                                 doc.on('mouseover', handleOver, null, {buffer:150});
  58                                 doc.on('mousedown', handleDown);
  59                         }
  60                 };
  61
  62                 el.on('mouseover', function(e){
  63                         if(!tid){
  64                                 tid = showMenu.defer(150);
  65                         }
  66                 });
  67
  68                 el.on('mouseout', function(e){
  69                         if(tid && !e.within(el, true)){
  70                                 clearTimeout(tid);
  71                                 tid = 0;
  72                         }
  73                 });
  74         }
  75
  76         createMenu('products');
  77         createMenu('support');
  78         createMenu('store');
  79
  80         // expanders
  81         Ext.getBody().on('click', function(e, t){
  82                 t = Ext.get(t);
  83                 e.stopEvent();
  84
  85                 var bd = t.next('div.expandable-body');
  86                 bd.enableDisplayMode();
  87                 var bdi = bd.first();
  88                 var expanded = bd.isVisible();
  89
  90                 if(expanded){
  91                         bd.hide();
  92                 }else{
  93                         bdi.hide();
  94                         bd.show();
  95                         bdi.slideIn('l', {duration:0.2, stopFx: true, easing:'easeOut'});
  96                 }
  97
  98                 t.update(!expanded ? 'Hide details' : 'Show details');
  99
 100         }, null, {delegate:'a.expander'});
 101 });