Wie stelle ich ein Adobe Flex Accordion so um, dass in jedem Canvas-Header eine Schaltfläche enthalten ist?

Question

Hier ist der Beispielcode für mein Akkordeon:

<mx:Accordion x="15" y="15" width="230" height="599" styleName="myAccordion"> 
    <mx:Canvas id="pnlSpotlight" label="SPOTLIGHT" height="100%" width="100%" horizontalScrollPolicy="off"> 
     <mx:VBox width="100%" height="80%" paddingTop="2" paddingBottom="1" verticalGap="1"> 
      <mx:Repeater id="rptrSpotlight" dataProvider="{aSpotlight}">    
       <sm:SmallCourseListItem 
        viewClick="PlayFile(event.currentTarget.getRepeaterItem().fileID);" 
        Description="{rptrSpotlight.currentItem.fileDescription}" 
        FileID = "{rptrSpotlight.currentItem.fileID}" 
        detailsClick="{detailsView.SetFile(event.currentTarget.getRepeaterItem().fileID,this)}" 
        Title="{rptrSpotlight.currentItem.fileTitle}" 
        FileIcon="{iconLibrary.getIcon(rptrSpotlight.currentItem.fileExtension)}" /> 
      </mx:Repeater> 
     </mx:VBox> 
    </mx:Canvas> 
</mx:Accordion> 

ich wie so eine Schaltfläche in jedem Kopf aufnehmen möchten:

wishful" onclick="alert('xss') http://www.kevinx.net/tf2/uploads/helpme.jpg

Answer 1

Danke, ich habe es mit FlexLib ‚s CanvasButtonAccordionHeader arbeiten.

Answer 2

Sie müssen einen benutzerdefinierten Header-Renderer erstellen, Fügen Sie eine Schaltfläche hinzu und positionieren Sie sie manuell. so etwas wie dieses versuchen:

<mx:Accordion> 
    <mx:headerRenderer> 
     <mx:Component> 
      <AccordionHeader xmlns="mx.containers.accordionClasses.*"> 
       <mx:Script> 
       <![CDATA[ 

       import mx.controls.Button; 


       private var extraButton : Button; 


       override protected function createChildren() : void { 
        super.createChildren(); 

        if (extraButton == null) { 
         extraButton = new Button(); 

         addChild(extraButton); 
        } 
       } 

       override protected function updateDisplayList(unscaledWidth : Number, unscaledHeight : Number) : void { 
        super.updateDisplayList(unscaledWidth, unscaledHeight); 

        extraButton.setActualSize(unscaledHeight - 6, unscaledHeight - 6); 
        extraButton.move(unscaledWidth - extraButton.width - 3, (unscaledHeight - extraButton.height)/2); 
       } 

       ]]> 
       </mx:Script> 
      </AccordionHeader> 
     </mx:Component> 
    </mx:headerRenderer> 

    <mx:HBox label="1"><Label text="Text 1"/></HBox> 
    <mx:HBox label="1"><Label text="Text 2"/></HBox> 
    <mx:HBox label="1"><Label text="Text 3"/></HBox> 
</mx:Accordion>