查看上一章Flex學習筆記(四)

DataGrid語法：
  <mx:DataGrid
    Properties
    columns="From dataProvider"
    draggableColumns="true|false"
    editable="false|true"
    editedItemPosition="null"
    horizontalScrollPosition="null"
    imeMode="null"
    itemEditorInstance="null"
    minColumnWidth="NaN"
    resizableColumns="true|false"
    sortableColumns="true|false"   
    Events
    columnStretch="No default"
    headerRelease="No default"
    headerShift="No default"
    itemEditBegin="No default"
    itemEditBeginning="No default"
    itemEditEnd="No default"
    itemFocusIn="No default"
    itemFocusOut="No default"
  />
部分屬性的意思
draggableColumns：true表示可以拖動每一列，來調整顯示的順序（默認是true，比如默認顯示列的順序是1，2，3，draggableColumns如果是true的你可以拖動隨意一列，讓他變化顯示順序。例如3，1，2）
editable：表示DataGrid是否可以編輯（true表示可以編輯）
resizableColumns：表示是否可以調整每一列的寬度。默認是true。
sortableColumns：點擊每一列的標題頭，可以讓它對內部顯示的數據進行排序。
 1<?xml version="1.0" encoding="utf-8"?>
 2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
 3    <mx:XMLList id="info">
 4        <info>
 5            <name>Alps</name>            
 6            <mail>alps@hotmail.com</mail>
 7            <phone>010-12345678</phone>
 8        </info>
 9        <info>
10            <name>Ceasar</name>            
11            <mail>Ceasar@hotmail.com</mail>
12            <phone>010-87654321</phone>
13        </info>
14        <info>
15            <name>Wong</name>            
16            <mail>Wong@hotmail.com</mail>
17            <phone>0532-87654321</phone>
18        </info>
19    </mx:XMLList>
20    <mx:Label text="從下方選擇信息:" color="red" fontWeight="10"/>
21    <mx:Panel layout="vertical" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" width="50%">
22        <mx:DataGrid dataProvider="{info}" width="80%" id="mg">
23            <mx:columns>
24                <mx:DataGridColumn dataField="name" headerText="姓名"/>
25                <mx:DataGridColumn dataField="mail" headerText="Email"/>
26                <mx:DataGridColumn dataField="phone" headerText="電話"/>
27            </mx:columns>
28        </mx:DataGrid>
29        
30        <mx:Form borderStyle="inset" width="50%">
31            <mx:FormHeading label="您的選擇是:"/>
32            <mx:FormItem label="姓名:">
33                <mx:Label text="{mg.selectedItem.name}"/>
34            </mx:FormItem>
35            <mx:FormItem label="Email:">
36                <mx:Label text="{mg.selectedItem.mail}"/>
37            </mx:FormItem>
38            <mx:FormItem label="電話:">
39                <mx:Label text="{mg.selectedItem.phone}"/>
40            </mx:FormItem>
41        </mx:Form>
42    </mx:Panel>
43</mx:Application>


Flex效果


Tree語法：
<mx:Tree
    Properties
    dataDescriptor="Instance of DefaultDataDescriptor"
    dataProvider="null"
    dragMoveEnabled="true|false"
    firstVisibleItem="First item in the control"
    hasRoot="false|true"
    itemIcons="null"
    maxHorizontalScrollPosition="0"
    openItems="null"
    showRoot="true|false"    
    Events
    change="No default"
    itemClose="No default"
    itemOpen="No default"
    itemOpening="No default"
  />

dragMoveEnabled：是drag-and-drop操作的一部分,配合drag-and-drop使用，當dragMoveEnabled=true的情況下，相當于移動，可以拖動內部元素到你想放置的地方，當等于false的時候，相當于復制，將會復制一個相同的元素到你想放置的地方。
showRoot：是否顯示根目錄中的元素。默認是true。 

 1<?xml version="1.0" encoding="utf-8"?>
 2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
 3    <mx:XMLList id="treeData">
 4        <hd text="您的郵箱">
 5            <hd text="收件箱">
 6                <hd text="新建"/>
 7                <hd text="草稿"/>
 8            </hd>
 9            <hd text="發件箱">
10                <hd text="已發郵件"/>
11            </hd>
12            <hd text="垃圾箱">
13                <hd text="已刪除郵件"/>
14            </hd>
15        </hd>
16    </mx:XMLList>
17    
18    <mx:Panel paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"     layout="vertical" width="70%">
19        <mx:Label text="請點擊Tree控件中的節點"/>
20        <mx:HDividedBox width="90%">
21            <mx:VBox width="40%">
22                <mx:Label text="showRoot=true時的效果，默認為true" color="red"/>
23                <mx:Tree id="treeSimple" dataProvider="{treeData}" labelField="@text" width="90%" dragMoveEnabled="true"
24                      dropEnabled="true" dragEnabled="true"/>
25                <mx:Form>
26                    <mx:FormItem label="您選擇的是:">
27                        <mx:Label id="lab" text="{treeSimple.selectedItem.@text}" />
28                    </mx:FormItem>
29                </mx:Form>
30            </mx:VBox>
31            <mx:VBox width="40%">
32                <mx:Label text="showRoot=false時的效果" color="red"/>
33                <mx:Tree id="treeSimple1" dataProvider="{treeData}" labelField="@text"
34                 showRoot="false" width="90%" dragMoveEnabled="false"
35                      dropEnabled="true" dragEnabled="true"/>
36            </mx:VBox>
37        </mx:HDividedBox>
38    </mx:Panel>
39</mx:Application>

Flex效果




menuBar、RichTextEditor
這兩個控件很簡單，看看代碼就明白了。有問題我們一起討論下。

 1<?xml version="1.0" encoding="utf-8"?>
 2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
 3    <mx:Script>
 4        <![CDATA[
 5            import mx.events.MenuEvent;
 6            function doClick(evt:MenuEvent):void {
 7                richText.text = "您點擊了： "+ evt.item.@label +" ,屬性值是： "+ evt.item.@data;
 8            }
 9        ]]>
10    </mx:Script>
11    <mx:XMLList id="menuData">
12            <subMenu label="新建" data="new">
13                <subMenu label="打開" data="open"/>
14                <subMenu label="保存" data="save"/>
15                <subMenu type="separator"/>
16                <subMenu label="退出" data="exit"/>
17            </subMenu>
18            <subMenu label="編輯" data="edit">
19                <subMenu label="撤銷" data="undo"/>
20                <subMenu type="separator"/>
21                <subMenu label="復制" data="copy"/>
22                <subMenu label="剪切" data="cut"/>
23                <subMenu label="粘貼" data="paste"/>
24            </subMenu>
25    </mx:XMLList>
26    <mx:Panel paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" width="40%" height="50%">
27        <mx:ApplicationControlBar dock="true">
28            <mx:MenuBar dataProvider="{menuData}" labelField="@label" id="mb"
29                 itemClick="doClick(event)"/>    
30        </mx:ApplicationControlBar>
31        <mx:RichTextEditor id="richText" height="40%" width="90%"/>
32        <mx:HBox width="90%">
33            <mx:TextArea id="txt" width="90%"/>
34            <mx:Button label="轉換成Html" click="txt.text=richText.htmlText"/>
35        </mx:HBox>
36    </mx:Panel>
37    
38</mx:Application>


Flex效果

 

 


                                                                                          2008年8月5日21:09:14
                                                                                                   Alps Wong