背景:在《Flex 自定义日期时间控件》中提到用户需要带时、分、秒的输入控件,而有时该种输入会在表格里发生。为此,做了自定义表格日期时间输入列,其编辑器用的就是自定义日期时间控件。
思路:
1)开发自定义列:DateTimeColumn,继承自AdvancedDataGridColumn;
2)开发一个适表格的单元格编辑器:DateTimeEditor,核心就是自定义日期时间控件;
3)修改DateTimeColumn的itemEditor为DateTimeEditor。
下述为DateTimeColumn代码
package blogdemo
{
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
import mx.core.ClassFactory;
import mx.formatters.DateFormatter;
public class DateTimeColumn extends AdvancedDataGridColumn
{
private var _itemFactory: ClassFactory;
private var _dateFormatString:String="YYYY-MM-DD HH:NN:SS";
private var dateFormater:DateFormatter = new DateFormatter();
public function DateTimeColumn(columnName:String = null)
{
super(columnName);
initDateTimeColumn();
}
public function get dateFormatString():String{
return this._dateFormatString;
}
public function set dateFormatString(value:String):void{
this._dateFormatString = value;
this.dateFormater.error="";
this.dateFormater.formatString = value;
}
private function initDateTimeColumn():void{
this.labelFunction = formatDate;
this._dateFormatString = "YYYY-MM-DD HH:NN:SS";
this.dateFormater.formatString = this._dateFormatString;
this.sortable = false;
this.width = 156;
this._itemFactory = new ClassFactory(DateTimeEditor);
this._itemFactory.properties = new Object();
this._itemFactory.properties["ownColumn"] = this;
this.itemEditor = _itemFactory;
this.editorDataField="selectedDate";
}
protected function formatDate(item:Object, column:AdvancedDataGridColumn):String{
return dateFormater.format(item[this.dataField]);
}
}
}
|
下述为DateTimeColumn代码
<?xml version="1.0" encoding="utf-8"?>
<blogdemo:DateTimeField xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="160" horizontalGap="0" height="23"
xmlns:blogdemo="blogdemo.*">
<fx:Script>
<![CDATA[
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
private var _ownColumn:AdvancedDataGridColumn;
public function get ownColumn():AdvancedDataGridColumn
{
var aa:DateTimeColumn
return _ownColumn;
}
public function set ownColumn(value:AdvancedDataGridColumn):void
{
_ownColumn = value;
}
override public function set data(value:Object):void
{
super.data = value;
if(value[ownColumn.dataField]!=null)
selectedDate = value[ownColumn.dataField] as Date;
invalidateProperties();
}
override public function get data():Object{
return super.data;
}
]]>
</fx:Script>
</blogdemo:DateTimeField>
|
应用演示:创建一个mxml Application,如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="724" height="363"
xmlns:blogdemo="blogdemo.*" creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]private var dpFlat:ArrayCollection = new ArrayCollection();
private function init():void{
var item:Object = new Object();
item["Name"] = "肯德基优惠券";
item["start_date"] = new Date(2010,8,1,16,0,0);
item["end_date"] = new Date(2010,8,30,16,0,0);
dpFlat.addItem(item);
//
item = new Object();
item["Name"] = "麦当劳优惠券";
item["start_date"] = new Date(2010,8,2,16,0,0);
item["end_date"] = new Date(2010,9,1,16,0,0);
dpFlat.addItem(item);
}; font-s
分享到:
Global site tag (gtag.js) - Google Analytics
|
相关推荐
Flex高级表格标题分组与列的锁定,及样式
flex 自定义组件,UI,flex 自定义组件。
Flex 自定义 时间 日历 控件
flex 自定义 datagrid 列头带组合框进行过滤
flex自定义的树形结构,展开,收缩,多级目录支持
Flex 自定义ToolTip源代码,可以运行的源代码
Flex自定义加载条的一个小示例。里面有readMe文本
研究Flex 组件声明周期,了解组件的生成步骤
FLEX自定义等待图标资源 18个SWF资源,19个GIF资源
Flex自定义右键菜单
FLex自定义写的控件,有时间,datagrid,tree,combox等,以及常用的处理字符串,弹出窗口
flex 自定义右键菜单 多级右键菜单flex 自定义右键菜单 多级右键菜单flex 自定义右键菜单 多级右键菜单
Flex自定义组件和自定义事件的使用。 Flex自定义组件和自定义事件的使用。
flex 高级自定义组件 需要重写的方法,以及为什么要重写,何时调用等。
flex自定义组件事件DEMO,一个简单的flex自定义组件的demo
flex自定义创建css样式,很有用的资源··
Flex 自定义公共包,可以在项目里直接使用
flex 自定义右键菜单
flex4.5自定义组件介绍,自定义组件前提条件
Flex4自定义组件 介绍了flex中如何自定义组件以及相关应用