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

最新推荐文章于 2025-04-30 19:58:46 发布

nisaijie

最新推荐文章于 2025-04-30 19:58:46 发布

阅读量845

点赞数

文章标签： flex function encoding datagrid xml object

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

Java代码

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

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

Java代码

<?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)" />
<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>

<?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和显示效果

Java代码

<?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>

<?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>