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>