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

       背景：在《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>