`
isiqi
  • 浏览: 15949726 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Flex 自定义表格日期时间输入列

阅读更多

背景:在Flex 自定义日期时间控件》中提到用户需要带时、分、秒的输入控件,而有时该种输入会在表格里发生。为此,做了自定义表格日期时间输入列,其编辑器用的就是自定义日期时间控件。

思路:

1)开发自定义列:DateTimeColumn,继承自AdvancedDataGridColumn

2)开发一个适表格的单元格编辑器:DateTimeEditor,核心就是自定义日期时间控件;

3)修改DateTimeColumnitemEditorDateTimeEditor

下述为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