FLEX DataGrid背景颜色调试 应用label改变column中文字的颜色
2009-11-06 16:05
603 查看
PriceColor.Mxml文件如下所示:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.utils.ObjectUtil;
private function price_labelFunc(item:Object, column:DataGridColumn):String {
return currencyFormatter.format(item.@price);
}
private function price_sortCompareFunc(itemA:Object, itemB:Object):int {
return ObjectUtil.numericCompare(itemA.@price, itemB.@price);
}
]]>
</mx:Script>
<mx:XML id="itemsXML">
<items>
<item name="Item 1" price="1.32" />
<item name="Item 2" price="-12.23" />
<item name="Item 3" price="4.96" />
<item name="Item 4" price="-0.94" />
</items>
</mx:XML>
<mx:Style>
.centered {
text-align: center;
}
</mx:Style>
<mx:CurrencyFormatter id="currencyFormatter"
precision="2"
useNegativeSign="false" />
<mx:DataGrid id="dataGrid" dataProvider="{itemsXML.item}">
<mx:columns>
<mx:DataGridColumn dataField="@name"
headerText="Name:"
headerStyleName="centered" itemRenderer="PriceLabel"/>
<mx:DataGridColumn dataField="@price"
headerText="Price:"
textAlign="right"
headerStyleName="centered"
labelFunction="price_labelFunc"
sortCompareFunction="price_sortCompareFunc"
itemRenderer="PriceLabel" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
PirceLabel.as文件如下所示:
package {
import mx.controls.Label;
import mx.controls.listClasses.*;
import mx.controls.Alert;
public class PriceLabel extends Label {
private const POSITIVE_COLOR:uint = 0x000000; // Black
private const NEGATIVE_COLOR:uint = 0xFF0000; // Red
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
/* Set the font color based on the item price. */
setStyle("color",(data.@price<=0)?NEGATIVE_COLOR:POSITIVE_COLOR);
//Alert.show("123545677");
}
}
}
曾经认为改变DataGrid中的Column中的颜色得通过调用DataGridItemRenderer来实现,后来发现不然,通过继承label也可以实现字体颜色变化
其实树节点字体颜色变化也是通过label标签实现的,如下所示:
package
{
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;
public class TreeChangeColor extends TreeItemRenderer
{
public function TreeChangeColor()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var __treelistData:TreeListData=listData as TreeListData;
label.x+=1;
if(__treelistData!=null){
if(__treelistData.item.@level==2){
label.setColor(0XFA5A32);
}else{
label.setColor(getStyle("color"));
}
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.utils.ObjectUtil;
private function price_labelFunc(item:Object, column:DataGridColumn):String {
return currencyFormatter.format(item.@price);
}
private function price_sortCompareFunc(itemA:Object, itemB:Object):int {
return ObjectUtil.numericCompare(itemA.@price, itemB.@price);
}
]]>
</mx:Script>
<mx:XML id="itemsXML">
<items>
<item name="Item 1" price="1.32" />
<item name="Item 2" price="-12.23" />
<item name="Item 3" price="4.96" />
<item name="Item 4" price="-0.94" />
</items>
</mx:XML>
<mx:Style>
.centered {
text-align: center;
}
</mx:Style>
<mx:CurrencyFormatter id="currencyFormatter"
precision="2"
useNegativeSign="false" />
<mx:DataGrid id="dataGrid" dataProvider="{itemsXML.item}">
<mx:columns>
<mx:DataGridColumn dataField="@name"
headerText="Name:"
headerStyleName="centered" itemRenderer="PriceLabel"/>
<mx:DataGridColumn dataField="@price"
headerText="Price:"
textAlign="right"
headerStyleName="centered"
labelFunction="price_labelFunc"
sortCompareFunction="price_sortCompareFunc"
itemRenderer="PriceLabel" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
PirceLabel.as文件如下所示:
package {
import mx.controls.Label;
import mx.controls.listClasses.*;
import mx.controls.Alert;
public class PriceLabel extends Label {
private const POSITIVE_COLOR:uint = 0x000000; // Black
private const NEGATIVE_COLOR:uint = 0xFF0000; // Red
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
/* Set the font color based on the item price. */
setStyle("color",(data.@price<=0)?NEGATIVE_COLOR:POSITIVE_COLOR);
//Alert.show("123545677");
}
}
}
曾经认为改变DataGrid中的Column中的颜色得通过调用DataGridItemRenderer来实现,后来发现不然,通过继承label也可以实现字体颜色变化
其实树节点字体颜色变化也是通过label标签实现的,如下所示:
package
{
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;
public class TreeChangeColor extends TreeItemRenderer
{
public function TreeChangeColor()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var __treelistData:TreeListData=listData as TreeListData;
label.x+=1;
if(__treelistData!=null){
if(__treelistData.item.@level==2){
label.setColor(0XFA5A32);
}else{
label.setColor(getStyle("color"));
}
}
}
}
相关文章推荐
- Flex 自定义DataGrid实现根据条目某一属性值改变背景颜色
- FLEX DataGrid背景颜色调试
- Flex datagrid/advancedatagrid按条件显示行的背景颜色
- Eclipse调试:改变颜色, 背景与字体大小 和xml字体调整
- Flex中(DataGrid--DataGridColumn)数据颜色多样化-类型替换
- flex 使用AdvancedDataGrid进行表头列合并,设置每列背景颜色(1)
- Flex中通过设置borderColor样式和.errorTip CSS分离器改变错误信息提示背景颜色(background color)的例子
- 改变DIV的背景颜色透明度,但其中的文字不受影响?
- Flex中DataGrid自定义文字显示颜色
- ExtJS4 Grid改变单元格背景颜色及Column render学习
- css3应用之自定义选中文字的背景颜色
- Eclipse调试:改变颜色, 背景与字体大小 和xml字体调整
- iOS改变Label上指定文字的颜色
- 改变导航栏的背景,导航栏上的文字的颜色,按钮的颜色
- 改变iOS应用中UITableView的背景颜色与背景图片的方法
- Excel的单元格根据文字内容改变格式,比如改变单元格的背景颜色
- flex 使用AdvancedDataGrid进行表头列合并,设置每列背景颜色(2)
- EasyUI DataGrid 改变背景颜色
- Android RadioButton设置选中时文字和背景颜色同时改变
- 选中时和未选中时的背景颜色和文字颜色的改变