flex:当我在List控件中鼠标悬停时出现边框

时间:2011-05-07 08:30:25

标签: flex

enter image description here

我有一个项目,用于显示数组中的内容。我还需要显示评分 - 介于1-5颗之间

可以正常使用每行的交替着色 - 但是,当我鼠标悬停时,itemrenderer(名为cont)中的skinnable countainer仍然保留了该行的原始颜色。当我们使用fxg图形时,我们有一个可换肤的容器盒,其中包含一个阴影的评级,它位于较大的表格内 - 鼠标悬停时行颜色发生了变化。附上截图 - 您可以看到评级框和鼠标悬停时高亮度行之间的细贴片......

我被告知要从Datagrid转移到List以解决这个问题并获得更好的性能 - 这似乎是一个让我搞砸的大任务。作为一个更容易的选择,正在寻找 我想 a)让skinnable容器颜色消失,所以我在鼠标悬停时看到一行中的单色 b)禁用鼠标悬停时网格行的颜色变化,因此避免了这个问题

由于

数据网格非常简单,如下所示

<mx:DataGrid id="experimentgrid" fontSize="{12}"  fontWeight="bold" color="#006837" styleName="dataGridStyle" rowHeight="{15}" borderVisible="false" showHeaders="false" x="{20}" y="{50}"  width="{900}" height="{350}"   dataProvider="{arr_expList}" itemClick="onItemExp(event);" creationComplete="setColWidths()" verticalScrollPolicy="auto" verticalScrollBarStyleName="scrollStyle" >
     <mx:columns>
<mx:DataGridColumn id="col11" dataField="no"  resizable="true" />
<mx:DataGridColumn id="col12" dataField="Name" resizable="true" />
<mx:DataGridColumn id="col13"  dataField="Rating" itemRenderer="itemRenderers.experimentGriditemRender" resizable="true"/>      
</mx:columns>

项呈示器代码如下

    <?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
focusEnabled="true">

    <fx:Script>
        <![CDATA[
            import assets.graphics.dotrating;

            import mx.controls.dataGridClasses.*;
            import mx.events.FlexEvent;

            import spark.core.SpriteVisualElement;
            private var mydot:SpriteVisualElement;

            override public function set data(value:Object):void
            {               
                if(value != null)
                {       
                    cont.removeAllElements();       
                    for(var i:int=0;i<value.Rating;i++)
                    {
                        mydot = new dotrating();
                    //600 is a stand-in for some calculations   
                        mydot.x= (600*0.02)+(i*600*0.02);
                        mydot.y= (600*0.012);
                        //mydot.x = (i*600*0.02);                       
                        mydot.height = 600*0.013;
                        mydot.width = 600*0.013;                        
                        cont.addElement(mydot);
                    }                   
                }
            }


        ]]>
    </fx:Script>
    <s:SkinnableContainer id = "cont" top="0" left="0" right="0" bottom="0" height="{600*0.02}">

    </s:SkinnableContainer>
</s:MXDataGridItemRenderer>

0 个答案:

没有答案