6 Replies Latest reply on Feb 25, 2011 1:32 PM by jmandawg

    Spark List Itemrenderer items outside of List

    jmandawg Level 1

      I have a spark list and i want some of the items in it to appear out side of the list depending on the users interaction.

       

      Is there a way to make items of an item renderer appear outsid of the LIst container?

       

      When i use basic layout on the lsit and explicitly set the x and y, they appear behind the list.

       

      Thanks.

        • 1. Re: Spark List Itemrenderer items outside of List
          Flex harUI Adobe Employee

          I'm not exactly sure what you want visually.  The Scroller will also clip

          things outside the viewport window.  You could write a custom layout.

          • 2. Re: Spark List Itemrenderer items outside of List
            jmandawg Level 1

            I don't want to use a scroller, and i don't want the list to clip the items at all.

             

            For example i have an Item renderer that scales the items when you mouse over them, but they get clipped by the list and you can't see the side.  I want the items to look like they are popping out of the list control and not clipped at all.

            • 3. Re: Spark List Itemrenderer items outside of List
              Flex harUI Adobe Employee

              Did you customize the List skin and remove the scroller?

              • 4. Re: Spark List Itemrenderer items outside of List
                JeffreyGong Level 1

                Hi jmandawg,

                 

                My ListRenderer.mxml may be what you want as follows,

                 

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

                <s:ItemRenderer

                 

                 

                xmlns:fx="http://ns.adobe.com/mxml/2009"

                xmlns:s="

                library://ns.adobe.com/flex/spark"

                xmlns:mx="

                library://ns.adobe.com/flex/mx"

                hide="mOut(

                null)" mouseMove="mOut(event)" mouseOut="mOutValueItem(event)"

                mouseDownOutside="mOut(event)" creationComplete="inited()"

                autoDrawBackground="

                true">

                 

                 

                <fx:Script>

                <![CDATA[

                 

                 

                import mx.controls.TextInput;

                 

                import mx.managers.PopUpManager;

                 

                import mx.utils.StringUtil;

                 

                import flash.text.TextLineMetrics;

                 

                 

                public var mouseOnPopup:Boolean = false;

                 

                public var vi:mx.controls.TextInput;

                 

                 

                private function inited():void {

                vi =

                new mx.controls.TextInput();

                vi.editable=

                false;

                vi.addEventListener(MouseEvent.MOUSE_OUT, mOut);

                vi.addEventListener(MouseEvent.ROLL_OUT, mOut);

                vi.addEventListener(MouseEvent.MOUSE_OVER, mOverPopup);

                }

                 

                 

                private function mOut(event:MouseEvent):void {

                 

                if ( vi.isPopUp ) {

                PopUpManager.removePopUp(vi)

                mouseOnPopup =

                false;

                }

                }

                 

                 

                private function mOverPopup(event:MouseEvent):void {

                mouseOnPopup =

                true;

                }

                 

                 

                private function mOutValueItem(event:MouseEvent):void {

                 

                if ( vi.isPopUp && !mouseOnPopup) {

                PopUpManager.removePopUp(vi)

                }

                }

                 

                 

                private function mOver(event:MouseEvent):void {

                 

                var txt:String = itemValue.text

                txt = StringUtil.trim(txt);

                 

                if(txt.length<5) return;

                 

                if(!vi.isPopUp) {

                PopUpManager.addPopUp(vi,

                this.parent)

                vi.text=txt;

                vi.setStyle(

                'fontSize',18);

                 

                var txtMetrics:TextLineMetrics = vi.measureText(vi.text);

                vi.width=txtMetrics.width*1.2

                vi.height=itemValue.height*1.4

                 

                var p:Point = itemValue.localToGlobal(new Point(itemValue.x, itemValue.y));

                vi.x=p.x;

                vi.y=p.y-10;

                }

                }

                 

                ]]>

                 

                </fx:Script>

                 

                 

                 

                <s:TextInput id="itemValue" text="{data.value}" width="200" mouseOver="mOver(event)" mouseOut="mOutValueItem(event)" mouseMove="mOut(event)" editable="false"/>

                 

                </s:ItemRenderer>

                 

                 

                You may test it with the following in your main.mxml

                 

                 

                 

                [

                Bindable]

                 

                private var detailAC:ArrayCollection = new ArrayCollection([{value:"nteDevice.device"},

                {value:

                "nteDevice.deviceTypenteDevice.loopbackIpAddr"},

                {value:

                "nteDevice.ipAddressnteDevice.loopbackIpAddr"},

                {value:

                "nteDevice.loopbackIpAddrnteDevice.loopbackIpAddr"},

                {value:

                "nteDevice.release"},

                {value:

                "nteDevice.releasenteDevice.loopbackIpAddr"},

                {value:

                "nteDevice.clli"},

                {value:

                "nteDevice.provisionStatus"}

                ]);

                 

                 

                <s:List id="lst" itemRenderer="com.att.ntscp.view.component.ListRenderer" dataProvider="{detailAC}" width="200" height="200"/>

                 

                 

                 

                Is it a little bit trick?

                 

                 

                Jeffrey

                 

                1 person found this helpful
                • 5. Re: Spark List Itemrenderer items outside of List
                  jmandawg Level 1

                  Thanks, removing the scroller worked.

                   

                  If i want to keep the scroller, and for example i'm using a vertical layout, is there any way to make the scroller not clip the hovered item?

                  • 6. Re: Spark List Itemrenderer items outside of List
                    jmandawg Level 1

                    Basically i just want to temporarially disable clipping on the hovered item.