2 Replies Latest reply on Mar 2, 2010 5:53 PM by flairjax

    Removing elements from an ItemRenderer with AS?   Error#1125

    flairjax Level 1

      How do I go about removing items, say a LABEL or BUTTON, from an itemRenderer?

       

      Do I do this via data override or in updateDisplayList? Both are giving me a

       

      RangeError: Error #1125: The index -1 is out of range 0.
          at spark.components::Label/computeLastAllowedLineIndex()[E:\dev\gumbo_beta2\frameworks\proje cts\spark\src\spark\components\Label.as:1276]
          at spark.components::Label/truncateText()[E:\dev\gumbo_beta2\frameworks\projects\spark\src\s park\components\Label.as:1149]

        • 1. Re: Removing elements from an ItemRenderer with AS?   Error#1125
          rfrishbe Level 3

          Looks like it could be a bug.  Do you mind posting more of your item renderer code?

           

          Thanks,

          Ryan

          • 2. Re: Removing elements from an ItemRenderer with AS?   Error#1125
            flairjax Level 1

            <?xml version="1.0" encoding="utf-8"?>
            <s:ItemRenderer width="100%"
                            height="100%"
                            xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:s="library://ns.adobe.com/flex/spark"
                            xmlns:mx="library://ns.adobe.com/flex/halo"
                            useHandCursor="true" buttonMode="true">
               
                <fx:Script>
                    <![CDATA[
                        import com.myapp.utils.Images;
                       
                        import mx.controls.Image;
                        import mx.events.FlexEvent;
                       
                        import spark.filters.GlowFilter;
                       
                        /**
                         *  BlogEntryVO value object
                         */
                        private var deviceEntry:*
                           
                        private var gf:GlowFilter;
                       
                        /**
                         *  callback function for delete icon click
                         */
                        public var deleteHandlerFunction:Function;
                       
                        /**
                         *  override set data to set BlogEntryVO
                         */
                        override public function set data(value:Object):void {
                            super.data = value;
                            deviceEntry = value;
                           
                            // setup colors and alphas
                            if( deviceEntry && !deviceEntry.intree ) {
                                backing.color = 0x6699cc;
                                icon.filters = [];
                                this.dispatchEvent( new FlexEvent(FlexEvent.DATA_CHANGE, true) ) ;
                            }else if( deviceEntry && deviceEntry.intree == 'in'){
                                backing.color = 0xFF652F;
                                gf = new GlowFilter(0xFF652F, .75, 7, 7, 4);
                                icon.filters = [gf];
                               
                                this.dispatchEvent( new FlexEvent(FlexEvent.DATA_CHANGE, true) ) ;
                               
                            }
                           
                        }
                       
                        /**
                         *  override set data to set BlogEntryVO
                         */
                        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                            super.updateDisplayList(unscaledWidth,unscaledHeight);
                           
                            if (device_btn) {
                                device_btn.text = stripDash(deviceEntry.name);
                                ip_lbl.text = deviceEntry.ip;
                                mac_lbl.text = deviceEntry.mac;
                                owner_lbl.text = deviceEntry.owner;
                                loc_lbl.text = deviceEntry.location;
                                this.icon.source = Images.resource_small(deviceEntry.type);
                                cloud_lbl.text = deviceEntry.cloud;
                               
                                // If device is a cloud we need to be sure to remove the cloud_lbl text
                                if(cloud_lbl.text == device_btn.text){
                                    cloud_lbl.visible = false;
                                }
                               
                               
                               
                                //We don't want empty fields
                                if( ip_lbl.text == '' || ip_lbl.text == null ) {
                                    ip_lbl.text = 'unknown';
                                }
                                if( mac_lbl.text == '' || mac_lbl.text == null ) {
                                    mac_lbl.text = 'unknown';
                                }
                                if( owner_lbl.text == '' || owner_lbl.text == null ) {
                                    owner_lbl.text = '';
                                }
                                if( loc_lbl.text == '' || loc_lbl.text == null ) {
                                    loc_lbl.text = '';
                                }
                                if( cloud_lbl.text == '' || cloud_lbl.text == null ) {
                                    cloud_lbl.text = '';
                                }
                               
                                /* THIS IS MY WORK AROUND RIGHT NOW  /*
                                //Remove ip_Lbl if it isn't an ip addres
                                var pattern:RegExp = /([0-9]+)\./;
                                if( !pattern.test( deviceEntry.ip ) ){
                                    ip_lbl.text = '';
                                }
                               
                                /* THIS DOESN'T WORK - GIVE ME THE ERROR
                               
                                    //Remove ip_Lbl if it isn't an ip addres
                                    var pattern:RegExp = /([0-9]+)\./;
                                    if( !pattern.test( deviceEntry.ip ) ){
                                        this.removeElement(ip_lbl);
                                    }
                               
                                */
                                   
                                //iconHolder.removeAllElements();
                                for each (var s:String in deviceEntry.type) {
                                    var icn:* = Images.resource_small(deviceEntry.type);
                                    if (icn) {
                                        //this.icon.source = Images.resource_small(deviceEntry.type);
                                        //device_btn.setStyle('icon', icon);
                                        //device_btn.addElement(icon);
                                        //iconHolder.addElement(icon);
                                    }
                                }
                            }               
                        }
                       
                        /**
                         *  handler for trash icon click, callback with blogEntry VO passed
                         */
                        private function device_btn_clickHandler(event:MouseEvent):void {
                            //deleteHandlerFunction(deviceEntry);
                        }
                       
                        private function stripDash( str:String ) : String
                        {
                            var myPattern:RegExp = new RegExp( "-", "g" ); 
                            var s: String = str.replace(myPattern, " ");
                            return s;
                        }
                       
                    ]]>
                </fx:Script>
               
                <s:states>
                    <s:State name="normal" />
                    <s:State name="hovered" stateGroups="[hoveredStates]" />
                    <s:State name="selected" stateGroups="[selectedStates]" />
                    <s:State name="normalAndShowsCaret" />
                    <s:State name="hoveredAndShowsCaret" stateGroups="[hoveredStates]" />
                    <s:State name="selectedAndShowsCaret" stateGroups="[selectedStates]" />
                </s:states>
               
                <s:Rect left="0" bottom="1" right="1" height="2">
                    <s:fill>
                        <s:SolidColor color="0x000000" alpha=".2"/>
                    </s:fill>
                </s:Rect>
               
                <s:Rect width="100%" height="100%">
                    <s:fill>
                        <s:SolidColor id="backing" color="0x6699cc" alpha="0" alpha.hoveredStates=".1" alpha.selectedStates=".25" />
                    </s:fill>
                </s:Rect>
               
                    <s:HGroup id="nameHolderGroup" left="5" right="10" gap="4" top="3">
                        <s:BitmapImage id="icon"
                                       source="{Images.resource(deviceEntry.type)}"
                                       resizeMode="scale"
                                       smooth="true"
                                       left="0" right="0"
                                       top="0" bottom="0">
                            </s:BitmapImage>

             

                        <s:Group top="3">
                            <mx:Label id="device_btn"
                                     buttonMode="true"
                                     toolTip="{device_btn.text}"
                                     maxWidth="175"
                                     textAlign="left"
                                     fontSize="11"
                                     top="0"
                                     fontWeight="bold"
                                     rollOver="{event.target.setStyle('textDecoration', 'underline') }"
                                     rollOut="{event.target.setStyle('textDecoration', 'none')}"
                                     click="device_btn_clickHandler(event)"
                                     />
                        </s:Group>
                    </s:HGroup>
                    <s:VGroup gap="3" left="12" top="{nameHolderGroup.x + nameHolderGroup.height + 3}" bottom="5">
                        <s:HGroup  left="12" right="10" gap="4">
                            <mx:Image source="{Images.resource('undo')}" />
                            <s:Label id="ip_lbl"
                                     styleName="myriad"
                                     maxDisplayedLines="1"
                                     fontSize="11"
                                     paddingTop="3"
                                     textAlign="justify"
                                     color="#4e5265"
                                     color.selectedStates="#121212"/>
                        </s:HGroup>
                       
                        <s:HGroup  left="12" right="10" gap="4">
                            <mx:Image source="{Images.resource('undo')}" />
                            <s:Label id="mac_lbl"
                                     styleName="myriad"
                                     maxDisplayedLines="1"
                                     fontSize="11"
                                     paddingTop="3"
                                     color="#4e5265"
                                     color.selectedStates="#121212"
                                     />
                        </s:HGroup>
                       
                        <s:HGroup left="12" right="10" gap="4">
                            <mx:Image source="{Images.resource('undo')}" />
                            <s:Label id="owner_lbl"
                                     styleName="myriad"
                                     maxDisplayedLines="1"
                                     fontSize="11"
                                     paddingTop="3"
                                     color="#4e5265"
                                     color.selectedStates="#121212"
                                     />
                        </s:HGroup>
                       
                        <s:HGroup top="85" left="12" right="10" gap="4">
                            <mx:Image source="{Images.resource('undo')}" />
                            <s:Label id="loc_lbl"
                                     styleName="myriad"
                                     maxDisplayedLines="1"
                                     fontSize="11"
                                     paddingTop="3"
                                     color="#4e5265"
                                     color.selectedStates="#121212"
                                     />
                        </s:HGroup>
                       
                        <s:HGroup id="cloudHolder" left="12" right="10" gap="4" >
                            <mx:Image source="{Images.resource('undo')}" />
                            <s:Label id="cloud_lbl"
                                     styleName="myriad"
                                     maxDisplayedLines="1"
                                     fontSize="11"
                                     paddingTop="3"
                                     color="#4e5265"
                                     color.selectedStates="#121212"
                                     />
                        </s:HGroup>
                    </s:VGroup>
            </s:ItemRenderer>