FLEX DataGrid背景颜色调试应用label改变column中文字的颜色

最新推荐文章于 2015-01-23 20:43:33 发布

原创最新推荐文章于 2015-01-23 20:43:33 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #flex #import #function #object #application

本文介绍如何使用Flex框架中的DataGrid组件，并通过自定义PriceLabel类实现价格列的字体颜色变化。此外，还展示了如何为树节点设置不同的字体颜色。

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"));
     }
}
}
}