1

I'm new to flex and recently assigned a project where I need to work on datagrid to make it able to highlight individual or multiple (but adjacent) cells based on the item being dragged from a list. So scenario is like this...

I'm using flex SDK 4.6. I have a mx datagrid (I can't use spark or other version due to some restrictions) with some dates as rows and time (00-23 hrs) in columns( so total 25 columns: 1st column showing dates and rest 24 for hours).

That way we have each date acting as row-header which runs through 24 columns for hours. I have a list which is getting populated from an XML file and each item in the list has a date and time elements associated with it. when we drag an item from the list into datagrid, it should highlight particular cell(s) in the datagrid based on matching dates(from list item being dragged and datagrid dates column) and matching hours (from list item being dragged and datagrid hour columns).

So far I'm able to get the row index and column index/indices on drag enter but getting them highlighted as a whole row-column. for example if it turns out to be 3rd row and 4th-5th column, it highlights whole 3rd row(all 25 columns) and all cells under 4th-5th column. what I need is to get to a specific location like someCell(rowIndex:xx, ColIndex:YY) and change that cell's style. There are some examples with item-renderer but they are using cell's data to find if its less than or greater than some value and then maipulating it, but I couldn't use it in my case.

Secondly I want to replace the scrollbars with two buttons(one at top and another at bottom) of the dates column to scroll the dates. I'll be very thankful for any advise on that too. Hope I've made the questions/scenario clear. Thanks for having a look into it. Looking forward for a helping hand from the community. This task is on urgent list...please help.

4

1 回答 1

0

如果我正确理解了您的问题，这是我的建议。

您应该能够为数据网格的每个单元格提供有关日期和时间的信息。您可以通过实现 IDropInListItemRenderer 接口的 ItemRenderer 来实现。如果用户选择您的 XML 列表中的任何元素，他会定义一个特定的时间点，该时间点应与 ItemRenderer 中的一个进行比较。

我希望它会帮助你。

在此处输入图像描述

//CellRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:mx="library://ns.adobe.com/flex/mx" 
     width="100%" height="100%" 
     backgroundColor="{(cellDate == parentDocument.selectedDate &amp;&amp; cellHour == parentDocument.selectedHour) ? 0xfcb9bb : 0xfefceb}" 
     implements="mx.controls.listClasses.IDropInListItemRenderer">

<fx:Script>
    <![CDATA[
        import mx.controls.dataGridClasses.DataGridListData;
        import mx.controls.listClasses.BaseListData;

        private var _listData:BaseListData;

        [Bindable]private var cellDate:String;
        [Bindable]private var cellHour:String;

        override public function set data( value:Object ) : void 
        {
            super.data = value;

            cellDate = data.date;
            cellHour = (listData as DataGridListData).label;
        }

        [Bindable]public function get listData() : BaseListData
        {
            return _listData;
        }
        public function set listData( value:BaseListData ) : void
        {
            _listData = value;
        }
    ]]>
</fx:Script>

</mx:HBox>

//应用

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            layout="absolute" 
            minWidth="955" minHeight="600" creationComplete="initApp()" backgroundColor="0xeeeeee">

<fx:Declarations>
    <fx:Model id="cells">
        <dataset>
            <data>
                <date>14.01.2013</date>
                <h00>00:00</h00>
                <h01>01:00</h01>
                <h02>02:00</h02>
                <h03>03:00</h03>
            </data>
            <data>
                <date>15.01.2013</date>
                <h00>00:00</h00>
                <h01>01:00</h01>
                <h02>02:00</h02>
                <h03>03:00</h03>
            </data>
            <data>
                <date>16.01.2013</date>
                <h00>00:00</h00>
                <h01>01:00</h01>
                <h02>02:00</h02>
                <h03>03:00</h03>
            </data>
            <data>
                <date>17.01.2013</date>
                <h00>00:00</h00>
                <h01>01:00</h01>
                <h02>02:00</h02>
                <h03>03:00</h03>
            </data>
        </dataset>
    </fx:Model>
</fx:Declarations>

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.DragEvent;
        import mx.events.ListEvent;

        [Bindable]public var selectedDate:String;
        [Bindable]public var selectedHour:String;

        private function initApp():void 
        {
            srclist.dataProvider = new ArrayCollection([
                {activity: 'Reading',       date: '14.01.2013', hour: '01:00'},
                {activity: 'Television',    date: '15.01.2013', hour: '03:00'},
                {activity: 'Movies',        date: '16.01.2013', hour: '02:00'}
            ]);
        }

        protected function onItemRollOver(event:ListEvent):void
        {
            var item:Object = (srclist.dataProvider as ArrayCollection).getItemAt(event.rowIndex);
            selectedDate = item.date;
            selectedHour = item.hour;
        }
    ]]>
</fx:Script>

<mx:HBox x="35" y="28" height="200">

    <mx:VBox width="124" height="100%">
        <mx:Label text="Available Activities"/>
        <mx:List 
            id="srclist" 
            labelField="activity" 
            width="118" height="100%" 
            allowMultipleSelection="false" 
            dragEnabled="true"
            dragMoveEnabled="true" selectionColor="0xffffff"
            itemRollOver="onItemRollOver(event)" itemRollOut="selectedDate = ''; selectedHour = '';"/>
    </mx:VBox>

    <mx:VBox height="100%">
        <mx:Label text="Scheduler"/>

        <mx:DataGrid 

            width="386" height="100%" dataProvider="{cells.data}" 
            alternatingItemColors="[0xffffff]"
            horizontalGridLineColor="0x999999" 
            horizontalGridLines="true"
            verticalGridLineColor="0x999999" 
            sortableColumns="false" 
            resizableColumns="false" selectable="false">

            <mx:columns>
                <mx:DataGridColumn dataField="date" headerText="Data"/>
                <mx:DataGridColumn dataField="h00" headerText="00:00" itemRenderer="com.CellRenderer"/>
                <mx:DataGridColumn dataField="h01" headerText="01:00" itemRenderer="com.CellRenderer"/>
                <mx:DataGridColumn dataField="h02" headerText="02:00" itemRenderer="com.CellRenderer"/>
                <mx:DataGridColumn dataField="h03" headerText="03:00" itemRenderer="com.CellRenderer"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:VBox>

</mx:HBox>

</mx:Application>
于 2013-01-27T13:12:53.583 回答