Flex фиксированная и переменная высота - можно ли установить разметку?

Question

я получил следующий Flex разметки приложений:

<app:MyApplicationClass 
    xmlns:app="*" 
    width="100%" 
    height="100%" 
    layout="vertical" 
    horizontalScrollPolicy="off" 
    verticalScrollPolicy="off"> 
    <mx:VBox id="idPageContainer" width="100%" height="100%" verticalGap="0" 
     horizontalScrollPolicy="off" verticalScrollPolicy="off"> 
     <mx:HBox id="idTopContainer" width="100%" height="28" horizontalGap="2"> 
      (top menu stuff goes here) 
     </mx:HBox> 
     <mx:HBox id="idBottomContainer" width="100%" height="100%" verticalScrollPolicy="off" clipContent="false"> 
      (page stuff goes here) 
     </mx:HBox> 
    </mx:VBox> 
</app:MyApplicationClass> 

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

Единственный способом я нашел, чтобы решить эту проблему высоты (до сих пор) является программно установить высоту быть фиксированным вместо переменного:

<mx:HBox id="idBottomContainer" width="100%" height="700" verticalScrollPolicy="off" clipContent="false"> 
     (page stuff goes here) 
    </mx:HBox> 

И фоновый код:

package { 
    import mx.containers.HBox; 
    import mx.core.Application; 
    import mx.events.ResizeEvent; 

    // (...) 
    public class MyApplicationClass extends Application { 
     public var idBottomContainer:HBox; 
     // (...) 

     private function ON_CreationComplete (event:FlexEvent) : void { 
      // (...) 
      addEventListener(ResizeEvent.RESIZE, ON_Resize); 
     } 

     private function ON_Resize (event:Event) : void { 
      idBottomContainer.height = this.height - idTopContainer.height; 
     } 
    } 
} 

Но это решение слишком «грязно», и я ищу более элегантный способ. Кто-нибудь знает альтернативу?

Answer 1

Мне кажется, что вам нужно работать. У меня что-то подобное работает на бесчисленных экранах. Но если вы действительно застряли, вы можете попытаться заменить VBox на Canvas и сделать что-то вроде этого:

<mx:Canvasid="idPageContainer" width="100%" height="100%" verticalGap="0" 
    horizontalScrollPolicy="off" verticalScrollPolicy="off"> 
    <mx:HBox id="idTopContainer" width="100%" height="28" horizontalGap="2"> 
     (top menu stuff goes here) 
    </mx:HBox> 
    <mx:HBox id="idBottomContainer" width="100%" top="{idTopContainer.height}" 
     height="{idPageContainer.height - idTopContainer.height}" 
      verticalScrollPolicy="off" clipContent="false"> 
     (page stuff goes here) 
    </mx:HBox> 
</mx:Canvas>