Flex例子--通过继承增加新的功能

Flex中通过继承可以为新组件增加新的功能，如通过注入方法，改变背景色，改变位置和高度等。这里主要掌握原组件的一些特性，属性和方法，以便根据需要的功能加以覆写（也可以自己扩展），达到自己想要的效果。下面是一个简单的例子
1、新建MyDataGrid.as,继承DataGrid,覆写drawRowBackground方法，注入rowColorFunction方法。

package com.test
{
	import flash.display.Sprite;

	import mx.controls.Alert;
	import mx.controls.DataGrid;
	import mx.controls.dataGridClasses.DataGridColumn;

	public class MyDataGrid extends DataGrid
	{
		private var _rowColorFunction:Function;

		public function MyDataGrid()
		{
			super();
		}
		//为MyDataGrid注入函数，get set
		public function set rowColorFunction(f:Function):void{
			this._rowColorFunction = f;
		}

		public function get rowColorFunction():Function{
			return this._rowColorFunction;
		}

		//覆写drawRowBackground方法,可改变位置、高度、颜色等，这里只改变背景颜色
		override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void{
	    	if( this.rowColorFunction != null ){
	    		if( rowIndex < this.dataProvider.length && rowIndex < this.listItems.length && this.listItems[rowIndex].length>0){
		    		var data:XML =  this.listItems[rowIndex][0].data;
		    		color = this.rowColorFunction.call(this,data,color);
	    		}else{
	    			color = this.rowColorFunction.call(this,null,color);
	    		}
	    	}
		    super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
        }
	}
}

2、新建MyDataGridTest.mxml文件，MyDataGrid中可以使用已经注入的方法rowColorFunction

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	 initialize="init()" xmlns:md="com.test.*" width="600" height="300">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;

			private var dataXml:XML;

			private function init():void {
				dataXmlService.url = "students.xml";//可改成具体请求方式
				try{
					dataXmlService.send();
				}catch(e:IOError){
					Alert.show("请求出错");
				}
			}

			private function dataXmlToData(evt:ResultEvent):void{
				dataXml = XML(evt.result);
				//提供数据源
				myDataGrid.dataProvider = dataXml.children();
			}

			//设置行背景色的方法
			private function getRowColor(data:Object,color:uint):Object {
				if(data==null) return 0xFFFFFF;

				return data.@color;
			}
		]]>
	</mx:Script>

	<mx:HTTPService id="dataXmlService" resultFormat="xml" result="dataXmlToData(event)" />
	<!--使用自己定义的组件MyDataGrid，可以使用已经注入的方法rowColorFunction -->
	<md:MyDataGrid id="myDataGrid" rowColorFunction="getRowColor" x="23.5" y="5" width="553" height="275" fontSize="12" fontWeight="normal">
		<md:columns>
			<mx:DataGridColumn headerText="学号" dataField="@col1"/>
			<mx:DataGridColumn headerText="姓名" dataField="@col2"/>
			<mx:DataGridColumn headerText="年龄" dataField="@col3"/>
			<mx:DataGridColumn headerText="爱好" dataField="@col4"/>
			<mx:DataGridColumn headerText="住址" dataField="@col5"/>
		</md:columns>
	</md:MyDataGrid>
</mx:Application>

3、使用的xml数据students.xml和显示效果

<?xml version="1.0" encoding="UTF-8"?>
<datas>
<data col1="2100" col2="张三" col3="20" col4="篮球" col5="北京" color="0x8DFEFE" />
<data col1="2101" col2="张四" col3="21" col4="篮球" col5="北京" color="0x8DFEFE" />
<data col1="2102" col2="张五" col3="22" col4="篮球" col5="北京" color="0x8DFEFE" />
<data col1="2103" col2="张六" col3="20" col4="篮球" col5="北京" color="0x8DFEFE" />
<data col1="2104" col2="张七" col3="22" col4="篮球" col5="北京" color="0x8DFEFE" />
<data col1="2105" col2="张八" col3="22" col4="篮球" col5="北京" color="0xAABBDD" />
<data col1="2106" col2="李四" col3="20" col4="篮球" col5="北京" color="0xAABBDD" />
<data col1="2107" col2="张大" col3="21" col4="篮球" col5="北京" color="0xAABBDD" />
<data col1="2108" col2="张关" col3="21" col4="篮球" col5="北京" color="0xAABBDD" />
<data col1="2109" col2="张看" col3="20" col4="篮球" col5="北京" color="0xAABBDD" />
</datas>

[img]http://dl.iteye.com/upload/attachment/149812/7b51e7ed-9f3e-371a-bd35-5c37972bd96f.jpg[/img]