Flex 学习小结（11）

1 advanceddatagrid中的分组grouping应用，比如：
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;

[Bindable]
private var bookData:ArrayCollection;
private function bookHandler(evt:ResultEvent):void
{
bookData=evt.result.books.stock;
bookGroup.refresh();
}
]]>
</mx:Script>
<mx:HTTPService id="bookStock" url="assets/books.xml" result="bookHandler(event)"/>
<mx:AdvancedDataGrid x="141" y="73" id="grid" >
<mx:dataProvider>

<mx:GroupingCollection id="bookGroup" source="{bookData}">

<mx:Grouping>

<mx:GroupingField name="category"/>

</mx:Grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn headerText="category" dataField="category"/>
<mx:AdvancedDataGridColumn headerText="author" dataField="author"/>
<mx:AdvancedDataGridColumn headerText="Book Name" dataField="name"/>
</mx:columns>
</mx:AdvancedDataGrid>
这样的话，是按列category来分类别浏览的
2 FLEX CSS里的global选择器
global {
fontFamily:"Comic Sans MS";
}
3 flex里的drag and drop。flex可以在datagrid,list等控件里实行drag and drop的，先看例子
<mx:Script>
<![CDATA[
private function creationCompleteHandler():void
{

srclist.dataProvider = ['Reading', 'Skating', 'Movies'];
destlist.dataProvider = [];
}

]]>
</mx:Script>

<mx:Panel title="Select activities" layout="horizontal">
<mx:VBox width="50%">
<mx:Label text="Available activities"/>

<!-- Drag initiator -->
<mx:List
id="srclist" width="100%" height="100"
allowMultipleSelection="true"
dragEnabled="true" dragMoveEnabled="true"
/>

</mx:VBox>

<mx:VBox width="50%">
<mx:Label text="Activities I enjoy"/>

<!-- Drop target -->
<mx:List
id="destlist" width="100%" height="100"
dropEnabled="true"
/>
</mx:VBox>
必须要设置原始和目标控件的dragEnabled为true,dragmoveEnabled=true时，表示是把内容剪切到另外的目标控件中

，FALSE时只COPY
允许双向拖放，通过把两个列表的dragEnabled和dropEnabled属性都设置为true。就像下边：
<!-- Both drag initiator and drop target -->
<mx:List
id="srclist" width="100%" height="100"
allowMultipleSelection="true"
dragEnabled="true"

dropEnabled="true"
dragMoveEnabled="true"
/>

<!-- . . . -->

<!-- Both drag initiator and drop target -->
<mx:List
id="destlist" width="100%" height="100"
allowMultipleSelection="true"
dragEnabled="true"

dropEnabled="true"
dragMoveEnabled="true"
/>

4 drag and drop在两个datagrid中的复杂点的例子
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/19/dragging-rows-between-two-different-flex-datagrid-controls/

-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
verticalAlign="middle"
backgroundColor="white">

<mx:Array id="arr">
<mx:Object colA="Item A.0" colB="Item B.0" colC="Item C.0" />
<mx:Object colA="Item A.1" colB="Item B.1" colC="Item C.1" />
<mx:Object colA="Item A.2" colB="Item B.2" colC="Item C.2" />
<mx:Object colA="Item A.3" colB="Item B.3" colC="Item C.3" />
<mx:Object colA="Item A.4" colB="Item B.4" colC="Item C.4" />
<mx:Object colA="Item A.5" colB="Item B.5" colC="Item C.5" />
<mx:Object colA="Item A.6" colB="Item B.6" colC="Item C.6" />
<mx:Object colA="Item A.7" colB="Item B.7" colC="Item C.7" />
<mx:Object colA="Item A.8" colB="Item B.8" colC="Item C.8" />
<mx:Object colA="Item A.9" colB="Item B.9" colC="Item C.9" />
</mx:Array>

<mx:ApplicationControlBar dock="true">
<mx:Form>
<mx:FormItem label="DataGrid #1:"
direction="horizontal">
<mx:CheckBox id="dg1_dragEnabled"
label="dragEnabled" />
<mx:CheckBox id="dg1_dropEnabled"
label="dropEnabled" />
<mx:CheckBox id="dg1_dragMoveEnabled"
label="dragMoveEnabled" />
</mx:FormItem>
<mx:FormItem label="DataGrid #2:"
direction="horizontal">
<mx:CheckBox id="dg2_dragEnabled"
label="dragEnabled" />
<mx:CheckBox id="dg2_dropEnabled"
label="dropEnabled" />
<mx:CheckBox id="dg2_dragMoveEnabled"
label="dragMoveEnabled" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>

<mx:VBox width="50%">
<mx:Label text="DataGrid #1" />
<mx:DataGrid id="dataGrid1"
width="100%"
rowHeight="22"
dataProvider="{arr}"
dragEnabled="{dg1_dragEnabled.selected}"
dragMoveEnabled="{dg1_dragMoveEnabled.selected}"
dropEnabled="{dg1_dropEnabled.selected}"
verticalScrollPolicy="on">
<mx:columns>
<mx:DataGridColumn dataField="colA"
headerText="Column A" />
<mx:DataGridColumn dataField="colB"
headerText="Column B" />
<mx:DataGridColumn dataField="colC"
headerText="Column C" />
</mx:columns>
</mx:DataGrid>
<mx:Label text="{dataGrid1.dataProvider.length} items" />
</mx:VBox>

<mx:VBox width="50%">
<mx:Label text="DataGrid #2" />
<mx:DataGrid id="dataGrid2"
width="100%"
rowHeight="22"
dataProvider="[]"
dragEnabled="{dg2_dragEnabled.selected}"
dragMoveEnabled="{dg2_dragMoveEnabled.selected}"
dropEnabled="{dg2_dropEnabled.selected}"
verticalScrollPolicy="on">
<mx:columns>
<mx:DataGridColumn dataField="colA"
headerText="Column A" />
<mx:DataGridColumn dataField="colB"
headerText="Column B" />
<mx:DataGridColumn dataField="colC"
headerText="Column C" />
</mx:columns>
</mx:DataGrid>
<mx:Label text="{dataGrid2.dataProvider.length} items" />
</mx:VBox>

</mx:Application>

5 一个将LABLE拖放到LIST里的编程的例子
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.core.*;
import mx.managers.DragManager;
import mx.events.DragEvent;


[Bindable]
private var targetData:ArrayCollection=new ArrayCollection();

private function dragTest

(initiator:Label,myData:String,event:MouseEvent,format:String):void
{

var ds:DragSource=new DragSource();
ds.addData(myData,format);
DragManager.doDrag(initiator,ds,event);
}
private function testDragEnter(evt:DragEvent,format:String):void
{
DragManager.acceptDragDrop(IUIComponent(evt.target));

}
private function testDragDrop(evt:DragEvent,format:String):void
{
var myData:Object=new Object();
myData=evt.dragSource.dataForFormat(format);
listTarget.dataProvider.addItem(myData);
}
]]>
</mx:Script>
<mx:Label id="dragLabel" text="drag this lable" mouseDown="dragTest(dragLabel,'this is the

data',event,'stringFormat')"/>
<mx:List width="466" id="listTarget" height="238" dataProvider="{targetData}"

dragEnter="testDragEnter(event,'stringFormat')" dragDrop="testDragDrop(event,'stringFormat')"></mx:List>