问题描述:

在进行DragDrop时, 我使用了DragDrop.relatedObject来获得Drag触发的UIComponent

如: var dargUI:TileList = e.relatedObject as TileList;

在AIR中运行, 可用且没有任何错误, 但当使用浏览器版本时, e.relatedObject为null, 上一行代码报错.

解决方法:

因此, 如果需要在两种环境中都可以运行, 应使用e.dragInitiator来获取Drag触发的源头:

	//----------------------------------
	//  dragInitiator 来源: DragEvent
	//----------------------------------

	/**
	 *  The component that initiated the drag.
	 */
	public var dragInitiator:IUIComponent;

----------Post from: @LiGuoliang.com, 欢迎回来~----------

//新建一个DataGrid _dataGrid = new DataGrid();
//增加右键
var menu:NativeMenu = new NativeMenu();
var menuItemDelete:NativeMenuItem = new NativeMenuItem("Delete");
//监听事件,在右键选定Delete时运行该函数
 menuItemDelete.addEventListener(Event.SELECT, onMenuDeleteClicked);
//将该menuItem加入到Menu中
menu.addItem(menuItemDelete);
 _dataGrid.contextMenu = menu; //将菜单加入到DataGrid中 

columnLocale = new DataGridColumn(); //新建一个列
columnLocale.dataField ="locale";//设定DataGrid中locale列的EditItem;
comboBoxLocaleEditor = new ClassFactory(ComboBox); // D
comboBoxLocaleEditor.properties = {dataProvider : LocalizationItem.localeArray} //设定该EditorItem的属性
columnLocale.itemEditor = comboBoxLocaleEditor; 

var columnGender:DataGridColumn = new DataGridColumn();
 columnGender.headerText = "Gender&quot";
columnGender.dataField = "Gender_";
//使用ItemRender
columnGender.itemRenderer = new ClassFactory(Gender_Label);
 _dataGrid.showHeaders = false; //隐藏DataGrid的Header
_dataGrid.columns = [columnLocale, columnGender]; //这一个数组,存放DataGrid的Column 

_dataGrid.dataProvider = value; //设定dataProvider 

具体在实际中的使用, 无异于MXML.

----------Post from: @LiGuoliang.com, 欢迎回来~----------

如Student中有一Gender_属性, 1表示男生, 2表示女生, 3表示未知, 现在有下要求:

1. 在DataGrid中不可以显示1, 2,3, 应显示 男女 [ 该功能可由LabelFunction实现],

2. 如果为男生,, 则”男生”颜色为红色, 女生颜色为默认, 未知字体大小为10号

具体实现:

			var columnGender:DataGridColumn = new DataGridColumn();
			columnGender.headerText = "Gender";
			columnGender.dataField = "Gender_"; //使用ItemRender
			columnGender.itemRenderer =  new ClassFactory(Gender_Label);
			//columnGender.labelFunction = formatGender;

			_dataGridStudent.columns = [columnID, columnName, columnAge, columnGender];

ItemRender实现: 该类将继承List, 重写其UpdateDisplayList函数, 如下:

package com.test.itemRender
{
import mx.controls.Label;
import mx.controls.listClasses.ListBase;

public class Gender_Label extends Label
{
	/**
	 * 构造函数
	 */
	public function Gender_Label() {
		super();
	}

	override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
		super.updateDisplayList(unscaledWidth, unscaledHeight);
		if(data.Gender_ == 1) {
             setStyle('fontSize',14);
             setStyle('fontWeight', 'bold');
             setStyle('color', 0xDD0000);
             this.text = "男生";
		 }else if(data.Gender_ == 2) {
		 	setStyle('fontSize',14);
		 	this.text = "女生"
		 }
		 //otherwise, return the label to its regular state
		 else {
		     setStyle('fontSize', 10);
             this.text = "未知";
		 }
	}

}// end of class
}// end of package

最终效果:

----------Post from: @LiGuoliang.com, 欢迎回来~----------

原理:

DataGrid通过DataGridColum函数中的itemToLabel实现数据源到现实内容的过程,

当DataGrid 某列的labelFunction不为空时, DataGridColumn的itemToLabel函数将执行:

if (labelFunction != null)
return labelFunction(data, this);

具体可参见类DataGridColumn的itemToLabel函数.

使用方法:

var columnGender:DataGridColumn = new DataGridColumn();  //增加一个Column
			columnGender.headerText = "Gender";
			columnGender.dataField = "Gender_";
			columnGender.labelFunction = formatGender;  //设定LabelFunction

			_dataGridStudent.columns = [columnID, columnName, columnAge, columnGender];  //将Column加入到DG中.总共四个Column

labelFunction函数

	/** 设定DataGrid 性别栏显示内容*/
	 private function formatGender(item:Object, c:DataGridColumn):String {
	 	var gender:String;
	 	if(item.Gender_ == 1) {
	 		gender = "男";
	 	}else if(item.Gender_ == 2) {
	 		gender = "女";
	 	}else {
	 		gender = "未知";
	 	}
	 	return gender;
	 }

----------Post from: @LiGuoliang.com, 欢迎回来~----------

在使用DataGrid进行数据编辑时, 我们不可避免的需要对数据的输入进行检验, 修正等错误.

解决方法:

监听DataGrid的editEnd事件:DataGridEvent.ITEM_EDIT_END.改事件中包含有正在编辑的DataGridColumn[列名], 编辑前的数据, 编辑结束后的数据, 等等

具体实现:

1. 获得当前编辑的DataGridColumn;  2. 获得编辑前后的数据;

	/**
	 * 响应EditEnd
	 * 获得当前编辑的DataGridColumn; 2. 获得编辑前后的数据;
	 */
	 private function onEditEnd(e:DataGridEvent):void {
	 	var beingEditField:String = e.dataField;  //获得当前列的dataField
	 	if(beingEditField == "locale") {
		 	var oldLocal:String = e.itemRenderer.data.locale;
			var newLocale:String = _dataGrid.itemEditorInstance[columnLocale.editorDataField]; //hashMap Key is String
			Alert.show("您正在编辑列: " + beingEditField + " 将: " + oldLocal + " 编辑为: " + newLocale); //在此处可以加入需要的数据验证,或是自动修正等等功能.可以使用	e.preventDefault()来阻止默认行为
			}
	 	}......
	 }

抓图:

----------Post from: @LiGuoliang.com, 欢迎回来~----------