updateDisplayList on List SelectionChanged

Question

I have a class named AdvancedPanel, with buttons in header, which inherits Panel class, and AdvancedPanelSkin which does the PanelSkin class. I have a List inside my AdvancedPanel and I want to enable a button when an item is selected on the list.

I have put the functioning to handle the enabling and disabling inside my overridden updateDisplayList() in child skin class, but it doesn't get called when I put invalidateDisplayList() call in List's changeHandler. Here is the relative part of my code:

//AdvancedPanelSkin.as
//..
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    addBtn.enabled = _hostComponent_.addButtonEnabled;
    removeBtn.enabled = _hostComponent_.removeButtonEnabled;  
}
//..

and

//form.mxml
//..
<fx:Script>
    <![CDATA[
        //...
        protected function list_changeHandler(event:IndexChangeEvent):void
        {
            panel.invalidateDisplayList(); // <- It doesn't call updateDisplayList() on AdvancedPanelSkin
        }
    ]]>
</fx:Script>
<components:AdvancedPanel id="panel" addButtonEnabled="true" removeButtonEnabled="{list.selectedIndex != -1}">
    <s:List id="list"
        //..
        change="list_changeHandler(event)"
    </s:List>   
</components:AdvancedPanel>
//..

Did I miss something?

Thanks in advance.

Answer 1

Invalidating display list of panel does not cause invalidating display list of its skin. Ideologically correct is to control skin from host component via skin parts other than component from its skin. So add the buttons to your panel as skin parts and override updateDisplayList of the Panel, not of its skin.

AdvancedPanel.as

[SkinPart]
public var addBtn:Button;
[SkinPart]
public var removeBtn:Button;

override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
        addBtn.enabled = ...;
        removeBtn.enabled = ...;
}