Loading ...
Sorry, an error occurred while loading the content.

Application Style Menu Bar issues

Expand Messages
  • Steve
    I am having a couple of problems with Menu. Any advice is appreciated. I have an application style menubar which needs to programmatically set the disable
    Message 1 of 6 , Jul 30, 2007
    • 0 Attachment
      I am having a couple of problems with Menu. Any advice is
      appreciated. I have an application style menubar which needs to
      programmatically set the disable configuration. I have not had any
      success using the menuItem.disabled functionality. I've attached some
      sample code which demonstrates the problem.

      Additionally, I've found that adding menu items after the initial
      rendering works unless there is not initial menu item. To duplicate,
      comment out the line that says:
      myMenu.addItem(junkMenuItem);

      When you do this, the menu will no longer display the new option
      which was added using the addItem method.

      Thanks again for any help and/or advice.

      -Steve

      <html>
      <head>
      <title>Test Page</title>
      <script type="text/javascript"
      src="./yui/yahoo/yahoo.js"></script>
      <script type="text/javascript"
      src="./yui/event/event.js"></script>
      <script type="text/javascript"
      src="./yui/dom/dom.js"></script>
      <script type="text/javascript"
      src="./yui/animation/animation.js"></script>
      <script type="text/javascript"
      src="./yui/container/container.js"></script>
      <script type="text/javascript"
      src="./yui/menu/menu.js"></script>
      <link rel="stylesheet" type="text/css"
      href="./yui/fonts/fonts.css">
      <link rel="stylesheet" type="text/css"
      href="./yui/menu/assets/menu.css">
      <script type="text/javascript">
      YAHOO.util.Event.onDOMReady(onDOMReady);

      var myMenu = new YAHOO.widget.Menu("Actions");
      var myOtherMenu = new YAHOO.widget.Menu
      ("Tools");
      var junkMenuItem = new YAHOO.widget.MenuItem
      (" ");

      var mainMenuBar = new YAHOO.widget.MenuBar
      ("myActionMenu", { lazyload: false});
      var myNewMenuItem = new YAHOO.widget.MenuItem
      ("Create Matrix", { disabled:true})


      function onDOMReady() {
      var myMenuBarItem = new
      YAHOO.widget.MenuBarItem("TestMenu",{submenu: myMenu});
      mainMenuBar.addItem(myMenuBarItem);
      // Problem #1 - the menu won't
      display when something is added
      // later if there is not a menu item
      during the render.
      // If you remove the 'junkMenu', the
      menu will not display
      myMenu.addItem(junkMenuItem);

      var myOtherMenuBarItem = new
      YAHOO.widget.MenuBarItem("Other Menu",{submenu: myOtherMenu});
      myOtherMenu.addItem(new
      YAHOO.widget.MenuItem("Sample"));

      mainMenuBar.addItem
      (myOtherMenuBarItem);
      mainMenuBar.render
      (document.getElementById("applicationMenu"));
      }

      function createNewMenuItem() {
      myMenu.addItem(myNewMenuItem);
      }

      function enable() {
      myNewMenuItem.disable = false;
      }

      function disable() {
      myNewMenuItem.disable = true;
      }
      </script>

      </head>
      <body onLoad="createNewMenuItem()">
      <div id="applicationMenu"> </div>
      <button type="button" onclick="enable
      ()">Enable</button>
      <button type="button" onclick="disable
      ()">Disable</button>
      </body>

      </html>
    • Todd Kloots
      Steve - You are not setting the disabled configuration properly correctly - you need to use the setProperty method of the MenuItem instance s configuration
      Message 2 of 6 , Aug 1, 2007
      • 0 Attachment
        Steve -

        You are not setting the "disabled" configuration properly correctly -
        you need to use the "setProperty" method of the MenuItem instance's
        configuration object:

        myNewMenuItem.cfg.setProperty("disabled", false);

        For more information on configuration properties, read the section
        titled "Using Configuration Properties" on the Menu landing page:
        http://developer.yahoo.com/yui/menu/#configurationproperties

        Regarding your other problem - can you please provide more information
        on why you want to create and render a completely empty Menu and add
        items to it after rendering?

        - Todd

        Steve wrote:
        >
        > I am having a couple of problems with Menu. Any advice is
        > appreciated. I have an application style menubar which needs to
        > programmatically set the disable configuration. I have not had any
        > success using the menuItem.disabled functionality. I've attached some
        > sample code which demonstrates the problem.
        >
        > Additionally, I've found that adding menu items after the initial
        > rendering works unless there is not initial menu item. To duplicate,
        > comment out the line that says:
        > myMenu.addItem(junkMenuItem);
        >
        > When you do this, the menu will no longer display the new option
        > which was added using the addItem method.
        >
        > Thanks again for any help and/or advice.
        >
        > -Steve
        >
        > <html>
        > <head>
        > <title>Test Page</title>
        > <script type="text/javascript"
        > src="./yui/yahoo/yahoo.js"></script>
        > <script type="text/javascript"
        > src="./yui/event/event.js"></script>
        > <script type="text/javascript"
        > src="./yui/dom/dom.js"></script>
        > <script type="text/javascript"
        > src="./yui/animation/animation.js"></script>
        > <script type="text/javascript"
        > src="./yui/container/container.js"></script>
        > <script type="text/javascript"
        > src="./yui/menu/menu.js"></script>
        > <link rel="stylesheet" type="text/css"
        > href="./yui/fonts/fonts.css">
        > <link rel="stylesheet" type="text/css"
        > href="./yui/menu/assets/menu.css">
        > <script type="text/javascript">
        > YAHOO.util.Event.onDOMReady(onDOMReady);
        >
        > var myMenu = new YAHOO.widget.Menu("Actions");
        > var myOtherMenu = new YAHOO.widget.Menu
        > ("Tools");
        > var junkMenuItem = new YAHOO.widget.MenuItem
        > (" ");
        >
        > var mainMenuBar = new YAHOO.widget.MenuBar
        > ("myActionMenu", { lazyload: false});
        > var myNewMenuItem = new YAHOO.widget.MenuItem
        > ("Create Matrix", { disabled:true})
        >
        >
        > function onDOMReady() {
        > var myMenuBarItem = new
        > YAHOO.widget.MenuBarItem("TestMenu",{submenu: myMenu});
        > mainMenuBar.addItem(myMenuBarItem);
        > // Problem #1 - the menu won't
        > display when something is added
        > // later if there is not a menu item
        > during the render.
        > // If you remove the 'junkMenu', the
        > menu will not display
        > myMenu.addItem(junkMenuItem);
        >
        > var myOtherMenuBarItem = new
        > YAHOO.widget.MenuBarItem("Other Menu",{submenu: myOtherMenu});
        > myOtherMenu.addItem(new
        > YAHOO.widget.MenuItem("Sample"));
        >
        > mainMenuBar.addItem
        > (myOtherMenuBarItem);
        > mainMenuBar.render
        > (document.getElementById("applicationMenu"));
        > }
        >
        > function createNewMenuItem() {
        > myMenu.addItem(myNewMenuItem);
        > }
        >
        > function enable() {
        > myNewMenuItem.disable = false;
        > }
        >
        > function disable() {
        > myNewMenuItem.disable = true;
        > }
        > </script>
        >
        > </head>
        > <body onLoad="createNewMenuItem()">
        > <div id="applicationMenu"> </div>
        > <button type="button" onclick="enable
        > ()">Enable</button>
        > <button type="button" onclick="disable
        > ()">Disable</button>
        > </body>
        >
        > </html>
        >
        >
      • Steve
        Thanks, Todd. That is exactly what I was missing. In regards to the need for a blank menu, I though it would be easiest to give you an illustation. This link
        Message 3 of 6 , Aug 1, 2007
        • 0 Attachment
          Thanks, Todd. That is exactly what I was missing. In regards to the
          need for a blank menu, I though it would be easiest to give you an
          illustation. This link will give you the story of what I am trying to
          accomplish.

          http://talk.synaro.com/downloads/temp/ydn/todd.html

          Thanks again. I can't tell you and the group there at Yahoo! how much
          time I am saving by having all the great YUI tools available. I think
          they are awesome and just keep getting better.
        • allanbjork
          ... Has this been solved? I m trying to do something similar to what you illustrated at the above link, and have no luck at creating menus with dynamically
          Message 4 of 6 , Oct 8, 2007
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, "Steve" <kelsey69@...> wrote:
            >
            > Thanks, Todd. That is exactly what I was missing. In regards to the
            > need for a blank menu, I though it would be easiest to give you an
            > illustation. This link will give you the story of what I am trying to
            > accomplish.
            >
            > http://talk.synaro.com/downloads/temp/ydn/todd.html
            >
            > Thanks again. I can't tell you and the group there at Yahoo! how much
            > time I am saving by having all the great YUI tools available. I think
            > they are awesome and just keep getting better.
            >


            Has this been solved? I'm trying to do something similar to what you
            illustrated at the above link, and have no luck at creating menus with
            dynamically changing items.
          • allanbjork
            Ok, I figured this out. If a call to getItems returned a zero length array, I would need to operate directly on the itemData array. (Is that because the menus
            Message 5 of 6 , Oct 9, 2007
            • 0 Attachment
              Ok, I figured this out.

              If a call to getItems returned a zero length array, I would need to
              operate directly on the itemData array. (Is that because the menus
              were marked lazyLoad:true?)

              By directly manipulating the itemData array, I could modify my menus
              after doing my database queries. (At least adding items, and toggling
              the disable flag work. Still writing the code to try removing items
              from the menus.)
            • allanbjork
              ... menus ... toggling ... items ... Removing items this way does work, but you have to always delete the element from itemData, even if getItems followed by a
              Message 6 of 6 , Oct 10, 2007
              • 0 Attachment
                --- In ydn-javascript@yahoogroups.com, "allanbjork" <abjork@...>
                wrote:
                >
                > Ok, I figured this out.
                >
                > If a call to getItems returned a zero length array, I would need to
                > operate directly on the itemData array. (Is that because the menus
                > were marked lazyLoad:true?)
                >
                > By directly manipulating the itemData array, I could modify my
                menus
                > after doing my database queries. (At least adding items, and
                toggling
                > the disable flag work. Still writing the code to try removing
                items
                > from the menus.)
                >


                Removing items this way does work, but you have to always delete
                the element from itemData, even if getItems followed by a call to
                removeItem works. Otherwise, once removeItem pulls the last menu
                entry off, the menu will get repopulated with the data present in
                itemData.

                YUI devs: could I suggest that a future version of the menu, be
                adjusted so that it when getItems/addItem/removeItem/etc. are called
                it simultaneously adjusts itemData as well? I think that would be
                more logical, and intuitive behaviour to YUI application developers.
                (And would also make my code a lot cleaner. ;-) )
              Your message has been successfully submitted and would be delivered to recipients shortly.