Flex学习笔记(五)

查看上一章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：点击每一列的标题头，可以让它对内部显示的数据进行排序。

<?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

<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。

<?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

<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
这两个控件很简单，看看代码就明白了。有问题我们一起讨论下。

<?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

</mx:Application>

Flex效果

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

发表于 2008-08-05 21:17 Alps Wong 阅读(3185) 评论(3) 编辑收藏所属分类: Flex

公告

留言簿(5)

随笔分类

随笔档案

文章分类

最新评论

阅读排行榜

评论排行榜