examples/shared/extjs/site.js

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