Buttonbar maxwidth property correct use

215 Views Asked by At

my name is Emilio and I'm a new member of this forum.

I tried the following piece of code to "test" the "maxwidth" property of a spark buttonbar control resizing his container.

If you try to execute this code, please try the following scenario:

  1. reduce browser window width to make it less of the sum of the button's width.
  2. add another label to buttonbar clicking on the button on the top
  3. enlarge browser window.

Why the "maxwidth" property doesn't make buttons to show correctly?

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx" 
                 creationComplete="bar_initializeHandler()" 
                 width="100%"
                 >


  <fx:Script>
        <![CDATA[
              import mx.collections.ArrayList;
              import mx.core.UIComponent;
              import mx.events.ResizeEvent;

              [Bindable]
              private var lista:ArrayList = new ArrayList();

              protected function bar_initializeHandler():void
              {
                    lista.addItem("stringa 1");
                    lista.addItem("stringa 2");
                    lista.addItem("stringa 3");
                    lista.addItem("stringa 4");
                    lista.addItem("stringa 5");
                    lista.addItem("stringa 6");
                    lista.addItem("stringa 7");
                    lista.addItem("stringa 8");
                    lista.addItem("stringa 9");
                    lista.addItem("stringa 10");
              }

              protected function vgroup1_resizeHandler(event:ResizeEvent):void
              {
                    var _width:Number = (event.target as UIComponent).width;
                    if(_width > 0)
                       bar.maxWidth = _width;
              }


              protected function button1_clickHandler(event:MouseEvent):void
              {
                    lista.addItem("parola");
              }
        ]]>
  </fx:Script>





  <s:VGroup id="layoutContainer" top="80" width="100%" paddingLeft="20" gap="0" left="0" right="0"  resize="vgroup1_resizeHandler(event)" >

        <s:ButtonBar id="bar"  dataProvider="{lista}" />

  </s:VGroup>


  <s:Button x="156" y="24" label="Button" click="button1_clickHandler(event)"/>
</s:Application>
0

There are 0 best solutions below