背景:在《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); }
protected function btnShowTime_clickHandler(event:MouseEvent):void { if(adg1.selectedItem!=null){ Alert.show((adg1.selectedItem["start_date"] as Date).toLocaleString()); } }
]]> </fx:Script>
<s:layout> <s:BasicLayout/> </s:layout>
<s:Panel title="DateTimeColumn 演示" color="0x000000" width="600" height="200" y="3" x="4"> <mx:AdvancedDataGrid id="adg1" width="100%" height="100%" color="0x323232" dataProvider="{dpFlat}" editable="true"> <mx:columns> <mx:AdvancedDataGridColumn dataField="Name" headerText="优惠券名称" editable="false"/> <blogdemo:DateTimeColumn dataField="start_date" headerText="起始时间"/> <blogdemo:DateTimeColumn dataField="end_date" headerText="截止时间"/> </mx:columns> </mx:AdvancedDataGrid> </s:Panel> <s:Button id="btnShowTime" label="选中行起始时间" click="btnShowTime_clickHandler(event)" x="610" y="10"/> </s:Application> |