examples/shared/extjs/site.js

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