Flex tree組件數(shù)據(jù)源、圖標(biāo)等修改
更新時(shí)間:2009年05月31日 01:25:38 作者:
在flex中Tree組件的使用。使用XML作為Tree組件的數(shù)據(jù)源。
更換Tree組件默認(rèn)、打開(kāi)、關(guān)閉、有子項(xiàng)等幾個(gè)狀態(tài)下的ico圖標(biāo)。
<?xml version="1.0" encoding="utf-8"?>
<!-- Tree control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!--下面是樣式-->
<mx:Style >
Tree
{
verticalScrollBarStyleName: treeVerticalScrollBar;
selectionColor: #417597;
/*為默認(rèn)、打開(kāi)、關(guān)閉、有子項(xiàng)等幾個(gè)狀態(tài)添加不同的ico*/
defaultLeafIcon: Embed(source="longstep/icon/sharp_grey/gif/base.gif");
folderOpenIcon: Embed(source="longstep/icon/sharp_grey/gif/vote_yes.gif");
folderClosedIcon: Embed(source="longstep/icon/sharp_grey/gif/options.gif");
disclosureOpenIcon: Embed(source="longstep/icon/sharp_grey/gif/pause.gif");
}
.treeVerticalScrollBar
{
borderColor: #f00;
}
</mx:Style>
<mx:Script>
<![CDATA[
//綁定數(shù)據(jù),定義xml類型變量用于存放選中節(jié)點(diǎn)
[Bindable]
public var selectedNode:XML;
//當(dāng)tree發(fā)生change事件時(shí)的事件
public function treeChanged(event:Event):void {
//將選中的節(jié)點(diǎn)轉(zhuǎn)換成xml,賦予selectedNode,as為轉(zhuǎn)換類型
selectedNode=Tree(event.target).selectedItem as XML;
}
//tree有3個(gè)事件使用較多,change、itemClick、itemOpen、itemClose
//change:選中列改變時(shí)被觸發(fā)
//itemClick:點(diǎn)擊某一列時(shí)觸發(fā)
//itemOpen:節(jié)點(diǎn)展開(kāi)時(shí)觸發(fā)
//itemClose:節(jié)點(diǎn)關(guān)閉時(shí)觸發(fā)
]]>
</mx:Script>
<!--XMLList作為數(shù)據(jù)源是最適合于tree組件的-->
<mx:XMLList id="treeData">
<node label="Mail Box">
<node label="Inbox">
<node label="Marketing"/>
<node label="Product Management"/>
<node label="Personal"/>
</node>
<node label="Outbox">
<node label="Professional"/>
<node label="Personal"/>
</node>
<node label="Spam"/>
<node label="Sent"/>
</node>
</mx:XMLList>
<mx:Panel title="Tree Control Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Label width="100%" color="blue"
text="Select a node in the Tree control."/>
<mx:HDividedBox width="100%" height="100%">
<!--@表示xml中間點(diǎn)的屬性,如:@label表示label屬性的值-->
<!--dataProvider="{treeData}"表示綁定數(shù)據(jù),數(shù)據(jù)源可以是XML也可以是XMLList-->
<mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
<mx:TextArea height="100%" width="50%"
text="Selected Item: {selectedNode.@label}"/>
</mx:HDividedBox>
</mx:Panel>
</mx:Application>
復(fù)制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<!-- Tree control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!--下面是樣式-->
<mx:Style >
Tree
{
verticalScrollBarStyleName: treeVerticalScrollBar;
selectionColor: #417597;
/*為默認(rèn)、打開(kāi)、關(guān)閉、有子項(xiàng)等幾個(gè)狀態(tài)添加不同的ico*/
defaultLeafIcon: Embed(source="longstep/icon/sharp_grey/gif/base.gif");
folderOpenIcon: Embed(source="longstep/icon/sharp_grey/gif/vote_yes.gif");
folderClosedIcon: Embed(source="longstep/icon/sharp_grey/gif/options.gif");
disclosureOpenIcon: Embed(source="longstep/icon/sharp_grey/gif/pause.gif");
}
.treeVerticalScrollBar
{
borderColor: #f00;
}
</mx:Style>
<mx:Script>
<![CDATA[
//綁定數(shù)據(jù),定義xml類型變量用于存放選中節(jié)點(diǎn)
[Bindable]
public var selectedNode:XML;
//當(dāng)tree發(fā)生change事件時(shí)的事件
public function treeChanged(event:Event):void {
//將選中的節(jié)點(diǎn)轉(zhuǎn)換成xml,賦予selectedNode,as為轉(zhuǎn)換類型
selectedNode=Tree(event.target).selectedItem as XML;
}
//tree有3個(gè)事件使用較多,change、itemClick、itemOpen、itemClose
//change:選中列改變時(shí)被觸發(fā)
//itemClick:點(diǎn)擊某一列時(shí)觸發(fā)
//itemOpen:節(jié)點(diǎn)展開(kāi)時(shí)觸發(fā)
//itemClose:節(jié)點(diǎn)關(guān)閉時(shí)觸發(fā)
]]>
</mx:Script>
<!--XMLList作為數(shù)據(jù)源是最適合于tree組件的-->
<mx:XMLList id="treeData">
<node label="Mail Box">
<node label="Inbox">
<node label="Marketing"/>
<node label="Product Management"/>
<node label="Personal"/>
</node>
<node label="Outbox">
<node label="Professional"/>
<node label="Personal"/>
</node>
<node label="Spam"/>
<node label="Sent"/>
</node>
</mx:XMLList>
<mx:Panel title="Tree Control Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Label width="100%" color="blue"
text="Select a node in the Tree control."/>
<mx:HDividedBox width="100%" height="100%">
<!--@表示xml中間點(diǎn)的屬性,如:@label表示label屬性的值-->
<!--dataProvider="{treeData}"表示綁定數(shù)據(jù),數(shù)據(jù)源可以是XML也可以是XMLList-->
<mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
<mx:TextArea height="100%" width="50%"
text="Selected Item: {selectedNode.@label}"/>
</mx:HDividedBox>
</mx:Panel>
</mx:Application>
相關(guān)文章
Flex 處理服務(wù)器端傳來(lái)的數(shù)據(jù)
對(duì)于Java端返回的各種Java類型的對(duì)象,F(xiàn)lex中能否有相應(yīng)的數(shù)據(jù)類型來(lái)映射。這是Flex與服務(wù)器通信使用remoteObject的關(guān)鍵。2009-08-08
Flex 非常實(shí)用的學(xué)習(xí)資料整理
對(duì)于學(xué)習(xí)flex 的朋友,絕對(duì)是個(gè)不錯(cuò)的一些資料,大家可以用ctrl+F搜索獲取2009-01-01
使用asx3m與xstream配合解決flex與java利用httpservice傳遞xml數(shù)據(jù)問(wèn)題
過(guò)年期間抽空在弄flex前端對(duì)象與后端java對(duì)象利用httpservice交互的問(wèn)題。比如前端需要user list數(shù)據(jù),構(gòu)造了flex user object類。2009-02-02
flex 實(shí)現(xiàn)全文檢索中的高亮顯示代碼
關(guān)鍵是重寫(xiě)了 override public function set data(value:Object):void 方法2009-06-06

