2009-10-07 11 views
10

Ich habe eine VBox in der ich 4 HBoxen habe. Die HBox der zweiten Ebene ist zunächst verborgen. Wenn ich auf das Label "Weitere Optionen anzeigen" klicke, wird die HBox der zweiten Ebene angezeigt. Jetzt habe ich den Platz belegt, der von der 'HBOx der zweiten Ebene' leer ist und die 'Suche' Taste unter dem Raum erscheint.wie zentriert man einen knopf in einer hbox im flex?

Meine erste Frage ist, gibt es eine Möglichkeit, die Suchschaltfläche so zu positionieren, dass der Platz nicht vorhanden ist und nach dem Klicken auf die Option "Show More Options" die "Second Level HBox" erscheint?

Und die zweite Frage ist, kann ich die Suchschaltfläche in der Mitte der Seite positionieren. Gibt es eine Methode, um den Inhalt einer HBox einer VBox zu zentrieren?

Dies ist mein Code:

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

Antwort

10

zu stopfen in einem HBox Zentrum, fügen Sie das folgende Attribut, auf das Feld in Frage

horizontalAlign="center" width="100%" 

Wie für den leeren Raum geschaffen durch unsichtbare Boxen (HBox oder VBox) weiß ich nicht, ob es einen Weg gibt, aber ich finde, dass ich dieses Attribut der unsichtbaren Box hinzufüge,

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

Hoffnung, die

+0

Diese horizontale Ausrichtung richtet nur den Inhalt innerhalb der HBox auf eine Mittelposition aus. Aber es ist immer noch in der Ecke der Webseite. Wie bringt man das ins Zentrum? – Angeline

+0

Ich verstehe nicht wirklich, was Sie meinen, aber lesen Sie meine Bearbeitung .. und sehen, ob das behebt es ... –

+0

Ja, Ihr bearbeitetes Programm das Problem behoben .. Vielen Dank .. – Angeline

0

hilft Sie flex states können die zweite Ebene hbox wie und hinzuzufügen, wenn es erforderlich ist.

1

Um die Komponente wirklich auszublenden, setzen Sie das Attribut includeInLayout auf den sichtbaren Wert. (Oder stellen Sie es selbst ein, wenn Sie das Sichtfeld ändern.) Standardmäßig ist es wahr, dh, ob die Komponente sichtbar ist oder nicht, der Platz wird gemessen.

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