플렉스 고정 및 가변 높이 - 마크 업에서 설정할 수 있습니까? 나는 다음과 같은 플렉스 애플리케이션 마크 업을 가지고

Question

:

<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>