2009-10-07 21 views
10

Ho una VBox all'interno della quale ho 4 HBoxes. Il secondo livello di HBox è inizialmente nascosto. Quando faccio clic sull'etichetta, "Mostra più opzioni", viene visualizzato il secondo livello di HBox. Ora ho lo spazio occupato dal 'secondo livello HBOx' vuoto e il pulsante 'cerca' appaia sotto lo spazio.come allineare un pulsante in un hbox in flex?

La mia prima domanda è: esiste un modo per posizionare il pulsante di ricerca in modo tale che lo spazio non sia lì e dopo che si fa clic sull'etichetta "Mostra più opzioni", viene visualizzato il "Second Level HBox"?

E la seconda domanda è, Posso posizionare il pulsante di ricerca al centro della pagina. C'è qualche metodo per centrare il contenuto di un HBox di un VBox?

Questo è il mio codice:

<mx:Form x="47" y="219" width="80%" > 


<mx:VBox id="searchBox" > 
    <mx:HBox id="searchTitle" width="100%" height="20" backgroundColor="#2680D5"> 
     <mx:Label text="Search Criteria" paddingRight="250" width="654.6212" height="18.030302"/> 
     <mx:Label text="show more options" id="moreOption" click="showOption(event)" width="127.045456" height="21.969696"/> 

    </mx:HBox> 

    <mx:HBox id="firstLevel" paddingBottom="10" paddingTop="15" > 

     <mx:Label text="Task Name" paddingLeft="20"/> 
     <mx:TextInput id="searchTaskName" paddingLeft="10" /> 

     <mx:Label text="Item Code" paddingLeft="30"/> 
     <mx:TextInput id="searchItemCode" paddingLeft="10"/> 

     <mx:Label text="Task Type" paddingLeft="30"/> 
     <mx:ComboBox id="searchTaskType" paddingLeft="10"/> 
    </mx:HBox> 

    <mx:HBox id="secondLevel" visible="false" paddingTop="5"> 

     <mx:Label text="Task ID" paddingLeft="20" /> 
     <mx:TextInput id="searchTaskId" paddingLeft="10"/> 



     <mx:Label text="Project Won" paddingLeft="30"/> 
     <mx:ComboBox id="searchWon" paddingLeft="10"/> 
    </mx:HBox> 


    <mx:HBox> 
     <mx:Button label="Search" /> 
    </mx:HBox> 


</mx:VBox> 

risposta

10

Per centrare roba dentro un HBox, aggiungere il seguente attributo alla casella in questione,

horizontalAlign="center" width="100%" 

Per quanto riguarda lo spazio vuoto creato da scatole invisibili (HBox o VBox), non so se c'è un modo, ma mi trovo ad aggiungere questo attributo alla scatola invisibile,

height="{secondLevel.visible ? 200 : 0}" 

Speranza che aiuta

+0

Questo allineamento orizzontale, allinea solo il contenuto all'interno dell'HBox in una posizione centrale. Ma è ancora nell'angolo della pagina web. Come portarlo al centro? – Angeline

+0

Non capisco davvero cosa intendi, ma leggi la mia modifica .. e vedi se lo risolve ... –

+0

Sì, il tuo codice modificato risolve il problema .. Grazie .. – Angeline

0

È possibile utilizzare flex states per aggiungere il secondo livello di hbox come e quando è necessario.

1

Per nascondere veramente il componente, impostare l'attributo includeInLayout su qualsiasi cosa visibile. (O impostalo tu stesso quando cambierai visibile) Per impostazione predefinita, è vero, quindi se il componente è visibile o meno, lo spazio viene misurato.

<mx:HBox id="secondLevel" visible="false" includeInLayout="{secondLevel.visible}" paddingTop="5"> 
Problemi correlati