flex4 mx | Tree - 物品订单在我折叠和展开物品时发生变化

Question

使用Flex 4.1，我试图用自定义ItemRenderer（MXTreeItemRenderer）创建一个Tree元素。我的问题是，只要我折叠和展开根项目，项目的顺序就会改变..这很奇怪，也许XML格式不正确。

有什么想法？

我Main.mxml文件：

<?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" minWidth="955" minHeight="600"> 

<!-- Launch your application by right clicking within this class and select Debug As > FDT SWF Application --> 

<fx:Declarations> 
<fx:XML id="moshe"> 
<notifications> 
    <root label="a" state="root_item"> 
     <node state="item" label="moshe"/> 
     <node state="item" label="moshe"/> 
    </root> 
    <root label="b" state="root_item"/> 
    <root label="c" state="root_item"/> 
    <root label="d" state="root_item"/> 
    <root label="e" state="root_item"/> 
    </notifications> 
    </fx:XML> 
</fx:Declarations> 
<mx:Tree dataProvider="{moshe}" width="500" itemRenderer="TheRenderer" labelField="@label" showRoot="false" folderClosedIcon="{null}" defaultLeafIcon="{null}" 
    folderOpenIcon="{null}" /> 
</s:Application> 

和我的项渲染：

<?xml version="1.0" encoding="utf-8"?> 
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"> 

<s:states> 
    <s:State name="normal" basedOn="{data.@state}"/> 
    <s:State name="hovered" basedOn="{data.@state}"/> 
    <s:State name="selected" basedOn="{data.@state}"/> 
    <s:State name="root_item"/>    
    <s:State name="item" /> 
</s:states> 

<fx:Script> 
    <![CDATA[ 
     import com.flexer.Debug; 
     import mx.controls.Alert; 

    override public function set data(value:Object):void { 
     super.data = value; 
     if(treeListData.hasChildren) 
     { 

      setStyle("color", 0xff0000); 
      setStyle("fontWeight", 'bold'); 
     } 
     else 
     { 
      setStyle("color", 0x000000); 
      setStyle("fontWeight", 'normal'); 
     } 
    } 

// Override the updateDisplayList() method 
    // to set the text for each tree node.  
    override protected function updateDisplayList(unscaledWidth:Number, 
     unscaledHeight:Number):void { 

     super.updateDisplayList(unscaledWidth, unscaledHeight); 
     if(super.data) 
     { 
      if(treeListData.hasChildren) 
      { 
       var tmp:XMLList = 
        new XMLList(treeListData.item); 
       var myStr:int = tmp[0].children().length(); 
       this.labelField.text= super.data.@label + " (" + myStr.toString() + ")"; 
      } 
     } 

    } 


    ]]> 
</fx:Script> 

<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle" includeIn="root_item"> 
    <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0"> 
     <s:fill> 
      <s:SolidColor color="0xFFFFFF" /> 
     </s:fill> 
    </s:Rect> 
    <s:Group id="disclosureGroup"> 
     <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" /> 
    </s:Group> 
    <s:BitmapImage source="{treeListData.icon}" /> 
    <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/> 
</s:HGroup> 

<s:HGroup includeIn="item"> 
    <s:Label text="{treeListData.label}"/> 
</s:HGroup> 


</s:MXTreeItemRenderer> 

Answer 1

感谢大卫Goshadze的评论我能够解决这个问题。

这是我的新的XML：

<notifications> 
<root label="a"> 
    <item label="moshe"/> 
    <item label="moshe2"/> 
</root> 
<root label="b" /> 
<root label="c" /> 
<root label="d" /> 
<root label="e" /> 
</notifications> 

，这是我的新的渲染：

<?xml version="1.0" encoding="utf-8"?> 
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"> 

<s:states> 
    <s:State name="normal"/> 
    <s:State name="hovered"/> 
    <s:State name="selected"/> 
</s:states> 

<fx:Script> 
    <![CDATA[ 
     import com.flexer.Debug; 
     import mx.controls.Alert; 

    override public function set data(value:Object):void { 
     super.data = value; 
     if (super.data) { 
      if(treeListData.hasChildren) 
      { 

       setStyle("color", 0xff0000); 
       setStyle("fontWeight", 'bold'); 
      } 
      else 
      { 
       setStyle("color", 0x000000); 
       setStyle("fontWeight", 'normal'); 
      } 

     } 
    } 


override protected function createChildren():void 

{ 

super.createChildren(); 



}  
// Override the updateDisplayList() method 
    // to set the text for each tree node.  
    override protected function updateDisplayList(unscaledWidth:Number, 
     unscaledHeight:Number):void { 
     super.updateDisplayList(unscaledWidth, unscaledHeight); 
     if(super.data) 
     { 
      var val:XML = super.data as XML; 
      if (val.name() == 'root') { 
       this.rootItemGroup.visible=true; 
       this.itemGroup.visible=false; 
       var tmp:XMLList = 
        new XMLList(treeListData.item); 
       var myStr:int = tmp[0].children().length(); 
       this.labelField.text= super.data.@label + " (" + myStr.toString() + ")"; 
      } else { 
       this.rootItemGroup.visible=false; 
       this.itemGroup.visible=true; 
      } 
     } 

    } 


    ]]> 
</fx:Script> 

<s:HGroup id="rootItemGroup" visible="false" left="0" right="0" top="0" bottom="0" verticalAlign="middle"> 
    <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0"> 
     <s:fill> 
      <s:SolidColor color="0xFFFFFF" /> 
     </s:fill> 
    </s:Rect> 
    <s:Group id="disclosureGroup"> 
     <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" /> 
    </s:Group> 
    <s:BitmapImage source="{treeListData.icon}" /> 
    <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/> 
</s:HGroup> 

<s:HGroup id="itemGroup" visible="false"> 
    <s:Label text="item ->"/> 
    <s:Label text="{treeListData.label}"/> 
</s:HGroup> 


</s:MXTreeItemRenderer> 

如果我要检查，如果一个项目是叶或无法检查.hasChildren节点因为我有叶节点。所以我检查XML对象的名称属性来解决这个问题。 很好用！感谢您的帮助。