Expand-Collapse on label click

hi guys

I am trying to impliment a expand-collapse on a label. When label (inside HBox) is clicked, i want the HBox to expand-collapse.

<mx:VBox width="96%" styleName="responseBox">

<mx:HBox id="outerHbox1" width="100%" maxHeight="261">  
<mx:Label text="Question 25:  Components and Servicess:" creationComplete="expcollLabel(event)" />       
</mx:HBox>

<mx:HBox styleName="projAnswerBox"  width="100%">
<mx:DataGrid id="dataGrid" width="862">
<mx:columns>
<mx:DataGridColumn headerText="List the name of project" />
<mx:DataGridColumn headerText="Modification" />
<mx:DataGridColumn headerText="Company benefits"  />                   
</mx:columns>
</mx:DataGrid>
</mx:HBox>      
            
</mx:VBox>

private function expcollLabel(event:Event):void {                        
var label:Label = event.currentTarget as Label;
var titleBar:UIComponent = rte.mx_internal::getTitleTextField();  --getting error here. ::getTitleBar not found on mx.controls.Label
titleBar.addEventListener(MouseEvent.CLICK, expandCollapseLabel);
expandCollapseLabel(event);
}

private function expandCollapseLabel(event:Event):void{
var label:Label;
if(event.currentTarget is Label){
label = event.currentTarget as Label;
}else{
label = event.currentTarget.parent as Label;
}
var headerHeight:uint = rte.mx_internal::getHeaderHeightProxy();
rte.height = (rte.height == headerHeight ? rte.maxHeight : headerHeight);
}      


Am i doing this correctly?
Any help will be appreciated.

thanks.
royjaydAsked:
Who is Participating?
 
dgofmanConnect With a Mentor Commented:
I think I wrote this code, but you replaced

var titleBar:UIComponent = rte.mx_internal::getTitleBar();
to
var titleBar:UIComponent = rte.mx_internal::getTitleTextField();

<fx:Script>
		<![CDATA[
			import mx.core.UIComponent;

			private function expcollLabel(event:Event):void {
				var label:Label = event.currentTarget as Label;
				var titleBar:UIComponent = rte.mx_internal::getTitleBar(); 
				titleBar.addEventListener(MouseEvent.CLICK, expandCollapseLabel);
				expandCollapseLabel(event);
			}
			
			private function expandCollapseLabel(event:Event):void{
				var label:Label;
				if(event.currentTarget is Label){
					label = event.currentTarget as Label;
				}else{
					label = event.currentTarget.parent as Label;
				}
				var headerHeight:uint = rte.mx_internal::getHeaderHeightProxy();
				rte.height = (rte.height == headerHeight ? rte.maxHeight : headerHeight);
			}
		]]>
	</fx:Script>
	<mx:Panel id="rte" width="100%" height="100%">
		<mx:VBox width="96%" styleName="responseBox">
			
			<mx:HBox id="outerHbox1" width="100%" maxHeight="261">  
				<mx:Label text="Question 25:  Components and Servicess:" creationComplete="expcollLabel(event)" />       
			</mx:HBox>
			
			<mx:HBox styleName="projAnswerBox"  width="100%">
				<mx:DataGrid id="dataGrid" width="862">
					<mx:columns>
						<mx:DataGridColumn headerText="List the name of project" />
						<mx:DataGridColumn headerText="Modification" />
						<mx:DataGridColumn headerText="Company benefits"  />                   
					</mx:columns>
				</mx:DataGrid> 
			</mx:HBox> 
		</mx:VBox>
	</mx:Panel>

Open in new window

0
 
dgofmanCommented:
If you want to collapse an aswerBox your code should be like this or you have to change visibility and includeInLayout parameters

<fx:Script>
		<![CDATA[
			private function expandCollapseLabel(event:Event):void{
				answerBox.maxHeight = (answerBox.maxHeight == 0 ? NaN : 0);
			}
		]]>
	</fx:Script>
	<mx:VBox width="96%" styleName="responseBox">
		<mx:HBox id="outerHbox1" width="100%" maxHeight="261">  
			<mx:Label text="Question 25:  Components and Servicess:" click="expandCollapseLabel(event)" />
		</mx:HBox>
		<mx:HBox id="answerBox" styleName="projAnswerBox"  width="100%">
			<mx:DataGrid id="dataGrid" width="862">
				<mx:columns>
					<mx:DataGridColumn headerText="List the name of project" />
					<mx:DataGridColumn headerText="Modification" />
					<mx:DataGridColumn headerText="Company benefits"  />                   
				</mx:columns>
			</mx:DataGrid> 
		</mx:HBox> 
	</mx:VBox>

Open in new window

0
 
royjaydAuthor Commented:
>>>I think I wrote this code
yep, its your code, i was just playing with it and trying to make it work :)
thanks very much brother, you helped me a lot. I am still learning flex. Let me know if i can help you anyway. I know little java, OOPS and spring.

0
 
royjaydAuthor Commented:
hi dgofman:

can you please help me with this question when you have time.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_26981918.html#a35484128

thanks in advance
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.