1 Reply Latest reply on Nov 2, 2009 2:11 PM by RajaFlex

    Placing the icon and label vertically in MenuBar

    RajaFlex

      Hi,

       

      Is there a way, to place the menuitems icon and label vertically in MenuBar. Flex doesn't provided any property for this? It seems we need to extend the MenuBar. Can anyone help me in getting this workaround?

       

      I have the below code with me. Here I have to place the labelField & iconField vertically (by default, flex is placing them horizontally).

       

      <mx:MenuBar id="menu"
              themeColor="#FFFFFF"
              width="100%" height="100%" x="0" y="0"
              dataProvider="{iconMenu}" showRoot="false"
              creationComplete="init()"
              itemClick="" labelField="@label" iconField="@icon">
      </mx:MenuBar>

       

      Thanks in advance.

       

      -RajaFlex

        • 1. Re: Placing the icon and label vertically in MenuBar
          RajaFlex Level 1

          It seems, I need to override the following function in MenuBar.as . Can anyone help me in overriding this function.

           

          override protected function updateDisplayList(unscaledWidth:Number,
                                                            unscaledHeight:Number):void
              {
                  super.updateDisplayList(unscaledWidth, unscaledHeight);

           

                  var lastX:Number = MARGIN_WIDTH;
                  var lastW:Number = 0;
                  var len:int = menuBarItems.length;

           

                  var clipContent:Boolean = false;
                  var hideItems:Boolean = (unscaledWidth == 0 || unscaledHeight == 0);

           

                  for (var i:int = 0; i < len; i++)
                  {
                      var item:IMenuBarItemRenderer = menuBarItems[i];

           

                      item.setActualSize(item.getExplicitOrMeasuredWidth(), unscaledHeight);
                      item.visible = !hideItems;

           

                      lastX = item.x = lastX+lastW;
                      lastW = item.width;

           

                      if (!hideItems &&
                          (item.getExplicitOrMeasuredHeight() > unscaledHeight ||
                           (lastX + lastW) > unscaledWidth))
                      {
                          clipContent = true;
                      }
                  }

           

                  if (background)
                  {
                      background.setActualSize(unscaledWidth, unscaledHeight);
                      background.visible = !hideItems;
                  }

           

                  // Set a scroll rect to handle clipping.
                  scrollRect = clipContent ? new Rectangle(0, 0,
                          unscaledWidth, unscaledHeight) : null;
              }

           

          Thanks!

          RajaFlex