View Full Version : Issue running Dynamic Menu created in Native Javascript on ExtJS 4

29 Sep 2011, 9:24 AM
Good Morning:

I have a problem involving the creation of an Dynamic Menu using Native Javascript and trying to execute it on ExtJS 4.

I found a very useful script on Javascript that creates a Dynamic Menu that shows and hides automatically. Here's the Link: http://www.dynamicdrive.com/dynamicindex1/omnislide/index.htm

You should see 3 menus on the left, top and right of this page. They appear as bars but when you point the mouse cursor on them, the menu appears automatically without interfering with the original page content.

I want to use this menu on an ExtJS Web Application in order to avoid making a menu inside the main page, however when I test this script with my ExtJS script (I created a script to generate a form on the Ext.onReady function), the dynamic menu appears for like a second and after that the form appears on front of the menu, so it dissapears.

It seems that the Menu Script was designed to be executed after the menu options are assigned (Please review the menuItems.js script on the page. You can download the whole javascript project with a demo page). This is part of the script:

menu[3] = {
id:'menu3', //use unique quoted id (quoted) REQUIRED!!
bartext:'RIGHT MENU',
menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Menu"], //create header
["Dynamic Drive", "http://www.dynamicdrive.com", ""],
["What's New", "http://www.dynamicdrive.com/new.htm",""],
["What's Hot", "http://www.dynamicdrive.com/hot.htm", ""],
["Message Forum", "http://www.dynamicdrive.com/forums", ""],
["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""],
["Link to Us", "http://www.dynamicdrive.com/link.htm", ""],

["FAQ", "http://www.dynamicdrive.com/faqs.htm", "", 1, "no"], //create two column row, requires d_colspan:2 (the default)
["Email", "http://www.dynamicdrive.com/contact.htm", "",1],

["External Links", "", ""], //create header
["JavaScript Kit", "http://www.javascriptkit.com", "_new"],
["Freewarejava", "http://www.freewarejava.com", "_new"],
["Coding Forums", "http://www.codingforums.com", "_new"] //no comma after last entry

]}; // REQUIRED!! do not edit or remove

////////////////////Stop Editing/////////////////

make_menus(); =>> This is the function that generates the menu;

As you can see, this is initialized on the <script> tag, but after you include the ExtJS bootstrap.js script on the HTML page and I create the FormPanel on the Ext.onReady, the menu just dissapears.

I will really appreciate if someone could help me out with this as soon as possible.

Cheers. :s:s