1. 程式人生 > >flex mx:Tree改變父節點與子節點的樣式

flex mx:Tree改變父節點與子節點的樣式

專案的需要把Tree的父節點與子節點的樣式進行區分,效果如圖:

主程式程式碼:

<?xml version="1.0" encoding="utf-8"?>  
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
         xmlns:s="library://ns.adobe.com/flex/spark"   
         xmlns:mx="library://ns.adobe.com/flex/mx"   
         xmlns:appWidgets="appWidgets.*">  
  <fx:Script>  
    <![CDATA[        
      import mx.controls.Alert;  
      import mx.events.FlexEvent;  
      import mx.events.ListEvent;        
        
      [Bindable]  
      public var selectedNode:XML;  
      protected function myTree_changeHandler(event:ListEvent):void  
      {  
        // TODO Auto-generated method stub  
        selectedNode=Tree(event.target).selectedItem as XML;  
        var itemIsBranch:Boolean=myTree.dataDescriptor.isBranch(myTree.selectedItem);  
        Alert.show(
[email protected]
+" "+itemIsBranch.toString() ); } private function tree_labelFunc(item:XML):String{ var returnLabel:[email protected]; // var itemIsBranch:Boolean=myTree.dataDescriptor.isBranch(item); // if(itemIsBranch){ // return returnLabel+=" (BRANCH)"; // } if(myTree.dataDescriptor.hasChildren(item)){ returnLabel+=" (含有"+myTree.dataDescriptor.getChildren(item).length+"條內容)"; } return returnLabel; } ]]> </fx:Script> <fx:Declarations> <!-- 將非可視元素(例如服務、值物件)放在此處 --> <fx:XMLList id="treeData"> <node label="Inbox"> <node label="Marketing"/> <node label="日本不宣戰,可免受國際法制約,繼續從美國進口軍需品"/> <node label="Personal"/> </node> <node label="古蹟建築"> <node label="天南地北天南地北天南地北天南地北"/> <node label="Personal alskdjflajsdlfjalsjdfldfasdfsdf"/> </node> <node label="Spam"/> <node label="Sent"/> <node label="水域風觀"> <node label="天南地北天南地北天南地北天南地北天南地北天南地北天南地北天南地北"/> <node label="Personal alskdjflajsdlfjalsjdfldfasdfsdf"/> </node> </fx:XMLList> </fx:Declarations> <mx:Tree id="myTree" width="300" height="400" textAlign="left" labelField="@label" dataProvider="{treeData}" change="myTree_changeHandler(event)" labelFunction="tree_labelFunc" wordWrap="true" variableRowHeight="true" depthColors="[#F1F9FF,#FFFFFF]" itemRenderer="appWidgets.MyTreeItemRenderer"/> </s:Application>
MyTreeItemRenderer程式碼如下:
package appWidgets  
{  
  import mx.controls.treeClasses.TreeItemRenderer;  
  import mx.controls.treeClasses.TreeListData;  
    
  public class MyTreeItemRenderer extends TreeItemRenderer  
  {  
    public function MyTreeItemRenderer()  
    {  
      super();  
    }  
      
    override public function set data(value:Object):void{  
      super.data=value;  
      if(TreeListData(super.listData).hasChildren){  
        setStyle("color",0x343434);  
        setStyle("fontWeight","bold");  
        setStyle("fontSize",13);  
      }  
      else{  
        setStyle("color",0x009900);  
      }  
    }      
  }  
}  
總結:
1、利用項呈示器ItemRenderer來載入樣式,繼承TreeItemRenderer
2、wordWrap使過長的文字自動換行
3、variableRowHeight="true" 使行高自動適應
4、depthColors按等級來顯示背景色
5、dataDescriptor 屬性返回ITreeDataDescriptor介面,提供用於對 Tree 控制元件顯示的資料集合執行分析和新增節點操作的方法的介面。
      此介面含有hasChildren, isBranch方法用來判斷是否含有子節點

相關推薦

flex mx:Tree改變節點節點樣式

專案的需要把Tree的父節點與子節點的樣式進行區分,效果如圖: 主程式程式碼: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.co

ORACLE數據庫遞歸查詢當前節點節點節點tree

oracle 遞歸 ORACLE 數據庫遞歸查詢當前數據的所有孩子數據(不包含自己)SELECT id AS id, parent_id AS parentId, parent_id AS parent, name AS text FROM mdm_center STAR

Extjs tree 實現節點節點聯動

ee = Ext.extend(Ext.tree.TreePanel, {  constructor : function(config) {  console.debug('Tree config roleId=' + config.roleId);  Eway.relat

關於css中元素元素之間margin-top的問題

可用 技術分享 一個 src 文檔流 重疊 cond one left 之前在使用經常遇到下面的問題: html: 1 <div class="top"> 2 <div class="one">I‘m the first!</div&

maven(二) maven項目構建ssh工程(工程模塊的拆分聚合)

子模塊 mbo warnings 找不到 .cn scope spl template opened         前一節我們明白了maven是個什麽玩意,這一節就來講講他的一個重要的應用場景,也就是通過maven將一個ssh項目分割為不同的幾個部分獨立開發,很重要,加油

JavaSE8基礎 當類中的成員變量重名了,使用super.名字 來訪問類的成員變量

public xtend tca ima his window logs java brush os :windows7 x64 jdk:jdk-8u131-windows-x64 ide:Eclipse Oxygen Release (4.7.0)

mysql 遞歸查詢節點節點

urn while ret tree getch then 節點 cti 遞歸 查父集合 --drop FUNCTION `getParentList` CREATE FUNCTION `getParentList`(rootId varchar(100)) R

總結來說 mode 取值 受容器控件共同決定

很多 tools too data 指定 wid 完全 child 設置 在自定義控件時為了滿足特定需求,widget大都是我們自己測量的。大家都知道測量時最重要的步驟就是重寫onMeasure方法,來計算出寬高。 這裏面的MeasureSpec 很重要,大家也都知道,它是

js遞歸渲染節點(點擊節點展示節點

ner container com 循環 cnblogs each ber 獲取 r+ 需求概況如下:點擊某個文件夾,顯示該文件夾下的子文件夾。文件夾的層級和數量不固定。 在這裏,我簡單準備了一下數據結構,來模擬這個效果:var nodes=[ {

JQuery 各節點獲取函數:節點節點,兄弟節點

集合 exp pos 完全 children content 文本 內容 clas jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限於父元素 jQuery.chi

Spring - 容器容器

pos pat 不能 文件中 spa c中 proxy -m 控制 一、Spring容器(父容器)   1、Mapper代理對象   2、Service對象 二、Springmvc(前端控制器)(子容器) Controller對象

轉帖:maven(二) maven項目構建ssh工程(工程模塊的拆分聚合)

圖片 做的 bsp IT 是個 pan 有一種 junit img 出處:http://www.cnblogs.com/whgk/p/7121336.html 前一節我們明白了maven是個什麽玩意,這一節就來講講他的一個重要的應用場景,也就是通過maven將一個ssh

JAVA的多型----類轉換問題

JAVA語言中, 物件變數是多型的 每個子類物件都算是父類物件(子類物件可以當作父類變數所引用) 那反過來可不可以呢? 答案是取決於父類變數引用的是誰 如果父類變數引用的是子類物件的例項, 可以通過強轉被子類變數引用 如果父類變數引用的是父類物件的例項,則不能被為子類變數引用

Java中類的轉換問題

自己在自學安卓,學的過程中遇到了不少困難,從中意識到自己的java知識不夠紮實而導致,為此分享一下自己的java知識,一來是鞏固知識,二來是給一些也在學java的同學共享共享! 首先先看個例子: class A { public A() { } } class B exte

總結:視窗建立及視窗視窗之間通訊

1、Javascript彈出子視窗 可以通過多種方式實現,下面介紹幾種方法 (1) 通過window物件的open()方法,open()方法將會產生一個新的window視窗物件 其用法為: window.open(URL,windowName,parameters); UR

深入淺出maven系列(三)---maven構建ssh工程(工程與子模組的拆分耦合) 前一節我們初識了maven並且掌握了maven的常規使用,這一節就來講講它的一個重要的場景,也就是通過maven將一個ssh專案分隔為不同的幾個部門獨立開發,很重要,加油!!!

        前一節我們初識了maven並且掌握了maven的常規使用,這一節就來講講它的一個重要的場景,也就是通過maven將一個ssh專案分隔為不同的幾個部門獨立開發,很重要,加油!!! 一、maven父工

iframe頁面頁面的互動

<iframe id="child" name="child" src="child.html"></iframe> 1.父頁面獲取子頁面的window物件 var childiframeWin = document.getElementById("child")

Vue學習之路(六)---元件元件之間的資料傳遞

前面我講了基本元件的寫法,現在一起學下父元件怎樣傳遞資料到子元件,以及子元件傳遞資料到父元件的 1.父元件傳遞資料到子元件 1.1 通過props傳遞 父元件App.vue中 <component-a big-num=98></component-a&g

jquery中對節點節點的利用

<tr id='new_tr'> <td id="td_1">td1</td> <td id="td_2">td2</td> <td id="td_3">td3</td> <td><b

CSS中divdiv——div有內容,div高度卻為0

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!