flex:当我在包含skinnable容器的datagrid中鼠标悬停时出现边框

时间:2011-05-12 10:03:14

标签: flex datagrid mouseover

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>![enter image description here][2]

2 个答案:

答案 0 :(得分:1)

我很确定您要将itemRenderer的autoDrawBackground属性设置为false。这是默认的。

除此之外,您还可以尝试使用DataGrid的rollOverColor样式进行试验。

答案 1 :(得分:1)

是的,我肯定会使用带有自定义项呈示器的列表而不是数据网格。 Datagrids很重,并且具有许多您甚至不使用的额外功能。这也可以解决您的问题。