Formatting a flex DataGrid Control Using a custom

Source: Internet
Author: User

The following example formats a column in a flex DataGrid and uses a custom item Renderer to color the text red in a cell if a price is below $0. if the item is greater than $0, the test is displayed in black. the price column is also formatted using a custom label function, which uses a currencyformatter, and finally, the Data Grid column uses a custom sort function to properly sort numeric columns.

Full code after the jump.

 

View mxml

<?xml version="1.0" encoding="utf-8"?><!-- http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/ --><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" />            <mx:DataGridColumn dataField="@price"                    headerText="Price:"                    textAlign="right"                    headerStyleName="centered"                    labelFunction="price_labelFunc"                    sortCompareFunction="price_sortCompareFunc"                    itemRenderer="PriceLabel" />        </mx:columns>    </mx:DataGrid></mx:Application>
 

Pricelabel.

package {    import mx.controls.Label;    import mx.controls.listClasses.*;    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);        }    }}

View SourceIs enabled in the following example.

Copy From: http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.