Добавить кнопку в заголовок гибкого аккордеона, который можно кликать

Question

Я хочу добавить кнопку с крестиком в заголовок аккордеона, который можно нажимать.это означает, что я хочу отобразить сообщение, когда кто-то нажимает на эту кнопку.Я просматриваю множество примеров в Интернете, но не могу этого сделать.если кто-то, кто знает, сделает это в flex4, это будет очень полезно.

Я пытался также с CanvasButtonAccordionHeader, он показывает кнопку, но когда я нажимаю на нее, он не выдает сообщение, хотя я создал обработчик события щелчка.пожалуйста, опишите его с помощью простого исходного кода.

thanx.

Answer 1

Я использую CanvasButtonAccordionHeader в Flex 3, поэтому не уверен, что это будет работать во Flex 4.

Но .... в случае его использования я создаю свой CanvasButtonAccordianHeader в качестве пользовательского компонента, который отправляетсобытие, когда кнопка нажата:

<CanvasButtonAccordionHeader xmlns="flexlib.containers.accordionClasses.*"  
 xmlns:mx="http://www.adobe.com/2006/mxml" mouseChildren="true" 
   <mx:Script>
<![CDATA[
            [Bindable]
        private var itemName:String;
        public function init():void{
            itemName=data.name;

        }

    ]]>
</mx:Script>
<mx:Metadata>
    [Event(name="homeButtonClicked")]
</mx:Metadata>
<mx:HBox width="100%" horizontalAlign="right" height="100%" 
    paddingRight="5"
    verticalAlign="middle">
    <mx:LinkButton label="&lt;&gt;"              
        click="dispatchEvent(new Event('homeButtonClicked'));"
        />

</mx:HBox>

 </CanvasButtonAccordionHeader>

Затем я создаю экземпляр пользовательского компонента в нижней части Accordian в качестве средства визуализации заголовка:

............................................

<mx:headerRenderer>
<mx:Component>      
<applicationLayout:AccordionNavHeaderRenderer   
                                            homeButtonClicked="outerDocument.dispatchEvent(new Event('homeClick'))"/>

    </mx:Component>
</mx:headerRenderer>
</mx:Accordion>

Надеюсь, что это полезно.

Answer 2

Вы можете легко сделать это, настроив заголовок в CSS.

Добавьте стиль заголовка к вашему аккордеону.
<mx:Accordion id="accordion" headerStyleName="accHeader" width="100%" />

В вашем CSS
.accHeader { fillColors: haloSilver, haloBlue; fillAlphas: 1.0, 0.5; selectedFillColors: black, black; } Или вставьте сюда свое изображение.

Вы можете поместить это сообщение в свой ViewStack.