Flex学习笔记(五) - Powered by Discuz!NT Archiver

cobra - 2008-8-6 10:50:00

查看上一章 Flex学习笔记(四)

DataGrid语法：

Code

部分属性的意思
draggableColumns：true表示可以拖动每一列，来调整显示的顺序（默认是true，比如默认显示列的顺序是1，2，3，draggableColumns如果是true的你可以拖动随意一列，让他变化显示顺序。例如3，1，2）
editable：表示DataGrid是否可以编辑（true表示可以编辑）
resizableColumns：表示是否可以调整每一列的宽度。默认是true。
sortableColumns：点击每一列的标题头，可以让它对内部显示的数据进行排序。

Code

[copy to clipboard]

CODE:

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效果

[flash=955,385]http://www.blogjava.net/images/blogjava_net/alps/DataGridSimple.swf[/flash]

Tree语法：

Code

dragMoveEnabled：是drag-and-drop操作的一部分,配合drag-and-drop使用，当dragMoveEnabled=true的情况下，相当于移动，可以拖动内部元素到你想放置的地方，当等于false的时候，相当于复制，将会复制一个相同的元素到你想放置的地方。
showRoot：是否显示根目录中的元素。默认是true。

Code

[copy to clipboard]

CODE:

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效果

[flash=786,367]http://www.blogjava.net/images/blogjava_net/alps/TreeSimple.swf[/flash]

menuBar、RichTextEditor
这两个控件很简单，看看代码就明白了。有问题我们一起讨论下。

Code