[英]Change background-color Cell in Datagrid (Flex 4.6)
I'm trying to alternate between two background colors for each cell in a datagrid. 我正在尝试为数据网格中的每个单元格在两种背景颜色之间切换。 It changes its state upon double clicking in a particular cell.
在特定单元格中双击后,它会更改其状态。
What I want is that the user be able to select individuals cell in a Datagrid so #FFFFFF color is for unselected cells and #CDCDCD for selected ones. 我想要的是用户能够在Datagrid中选择单个单元格,因此#FFFFFF颜色用于未选择的单元格,而#CDCDCD用于选择的单元格。
I have the following code for an ItenRenderer: 我为ItenRenderer提供以下代码:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void {
//lblData.text = data[column.dataField]
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="selected"/>
</s:states>
<s:Label id="lblData" top="9" left="7" text="10" width="100%" height="100%" textAlign="center"/>
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color.selected="#CDCDCD" color.normal="#FFFFFF"/>
</s:fill>
</s:Rect>
</s:GridItemRenderer>
The question is that label is never shown due to the rect component hide it. 问题是,由于rect组件将其隐藏,因此从未显示标签。 how can i accomplish this?
我怎样才能做到这一点?
Thanks in advance. 提前致谢。
Try this: 尝试这个:
//Application //应用
<?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" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]private var initDG:ArrayCollection = new ArrayCollection([
{Artist:'01', Album:'Album 01', Year:'2008'},
{Artist:'02', Album:'Album 02', Year:'2009'},
{Artist:'03', Album:'Album 03', Year:'2007'},
{Artist:'04', Album:'Album 04', Year:'2003'},
]);
]]>
</fx:Script>
<s:VGroup>
<s:DataGrid id="myGrid" width="360" dataProvider="{initDG}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="Artist" headerText="Artist" itemRenderer="com.dgcoloredcells.CellRenderer"/>
<s:GridColumn dataField="Album" headerText="Album" itemRenderer="com.dgcoloredcells.CellRenderer"/>
<s:GridColumn dataField="Year" headerText="Year" itemRenderer="com.dgcoloredcells.CellRenderer"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:VGroup>
</s:Application>
//Renderer //渲染器
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
implements="mx.controls.listClasses.IDropInListItemRenderer">
<fx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
private var _listData:BaseListData;
[Bindable]private var isSelected:Boolean = false;
override public function set data( value:Object ) : void
{
super.data = value;
lblData.text = data[column.dataField];
}
[Bindable]public function get listData() : BaseListData
{
return _listData;
}
public function set listData( value:BaseListData ) : void
{
_listData = value;
}
private function onClick(evt:Event):void
{
isSelected = !isSelected;
}
]]>
</fx:Script>
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="{isSelected ? 0xCDCDCD : 0xFFFFFF}"/>
</s:fill>
</s:Rect>
<s:Label id="lblData" top="9" left="7" width="100%" height="100%" textAlign="center" doubleClickEnabled="true" doubleClick="onClick(event)"/>
</s:GridItemRenderer>
//EDIT Here you can see my screenshot for data[column.dataField] problem: //编辑在这里您可以看到我的数据[column.dataField]问题的屏幕截图:
Here is the coresponding value object 这是最有价值的对象
So data[column.dataField] = data["Artist"] = "01" 因此data [column.dataField] = data [“ Artist”] =“ 01”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.