Flex Hack 02:datagrid end of column for data rollup

Excel's table will have a row of data in the back of a set of data to show the table of the average, the maximum, the minimum value, in flex to do a little action can make a similar effect.

Actually Alex Harui has already made the request for us, we first look at the operation effect:

In fact, the principle is very simple is to rewrite the DataGrid at the end of the column to add a uicomponent is named: Datagridfooter, let it show the average, the maximum, etc., where the most important is to rewrite the DataGridColumn, In this class we add a footercolumn:datagridcolumn so that the Footercolumn Labelfunction calculates the corresponding average, the maximum value, etc. (see here for the use of labelfunction: Flex Hack 01:labelfunction), the code is as follows:

import　mx.controls.dataGridClasses.DataGridColumn;
　　　　 [DefaultProperty("footerColumn")]
　　　　 public　class　FooterDataGridColumn　extends　DataGridColumn
　　　　 {
　　　　　　　　　 public　function　FooterDataGridColumn()
　　　　　　　　　 {
　　　　　　　　　　 super();
　　　　　　　　　 }
　　　　　　　　　 /**//**
　　　　　　　　　 *　用这个对应的labelFunction计算出这一列的最大值或最小值等等
　　　　　　　　　 *　**/
　　　　　　　　　 public　var　footerColumn:DataGridColumn;
　　　　 }

The DataGrid is then rewritten to display the end of the column, such as overriding the Createchildren method:

override　protected　function　createChildren():void
　　　　　　　　 {
　　　　　　　　　　　　 super.createChildren();
　　　　　　　　　　　　 if　(!footer)
　　　　　　　　　　　　 {
　　　　　　　　　　　　　　　　 footer　=　new　DataGridFooter();
　　　　　　　　　　　　　　　　 footer.styleName　=　this;
　　　　　　　　　　　　　　　　 addChild(footer);
　　　　　　　　　　　　 }
　　　　　　　　 }

Then rewrite the Adjustlistcontent method to determine the location of the footer:

override　protected　function　adjustListContent(unscaledWidth:Number　= 　-1,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　 unscaledHeight:Number　=　-1):void
　　　　　　　　 {
　　　　　　　　　　 super.adjustListContent(unscaledWidth,　 unscaledHeight);
　　　　　　　　　　 listContent.setActualSize(listContent.width,　 listContent.height　-　footerHeight);
　　　　　　　　　　 footer.setActualSize(listContent.width,　 footerHeight);
　　　　　　　　　　 footer.move(listContent.x,　listContent.y　+　 listContent.height　+　1);
　　　　　　　　　 }

At the same time, when some attributes are changed or dragged to update the position of footer, and so on, then we have to rewrite a method:

override　public　function　invalidateDisplayList():void
　　　　　　　　　 {
　　　　　　　　　　　　　　 super.invalidateDisplayList();
　　　　　　　　　　　　　　 if　(footer)
　　　　　　　　　　　　　　　　　　　 footer.invalidateDisplayList();
　　　　　　　　　 }

There is also a class datagridfooter, this is our protagonist, used to display the data at the end of the column, there is nothing special about this class, is to calculate their location display, and so on, interested friends can download the code in the following information to see.

http://blogs.adobe.com/aharui/DataGridFooter3/dg.swf