flex4控件联动显示与隐藏效果

    在flex的开发过程中,有一种类似这样的效果,比如,我想选择不同的日期查询效果(按年,月,日,范围),然后联动不同的控件查询条件。在这种情况下,使用如下代码,即可做到显示与隐藏:
隐藏:

 includeInLayout="false"
 visible="false"

显示:

 includeInLayout="true"
 visible="true"


例子,如下所示:

1.选择控件以及它的处理函数:

      <s:HGroup>
			  <mx:Label text="按时间:" height="29"/>
			  <s:DropDownList id="selectType"
							  horizontalCenter="31"
							  top="20" selectedIndex="1" change="day_change(event);" width="126">
				  <s:dataProvider>
					  <s:ArrayList source="[全部,按日,按月,按年,按时间范围]" />
				  </s:dataProvider>
			  </s:DropDownList>
		  </s:HGroup>


2.被选择和处理的控件列表:

         <!--按日-->
	 <mx:Label id="selectTime" text="选择时间"/>
	 <mx:DateField id="select_date" formatString="YYYY-MM-DD" selectedDate="{new Date()}" enabled="true" visible="true" />
	 <mx:Button id="manualSetBtn" label="手动计算当天节能率" click="manualSetBtn_clickHandler(event)"  height="24" width="132"/>
	 <mx:Label id="toSelect" text="至"  visible="false" includeInLayout="false"/>
         <mx:DateField id="selectTo_date" formatString="YYYY-MM-DD" selectedDate="{new Date()}"  visible="false" 
             includeInLayout="false"/>
        
         <!--按月-->
	 <s:NumericStepper id="select_year"  minimum="2012" maximum="2112" horizontalCenter="60"  verticalCenter="0" visible="false" 
	includeInLayout="false" width="62" change="numberValueChange(event)"/>
	
        <mx:Label text="年" id="select_yearLabel" visible="false" includeInLayout="false"/>
        <s:NumericStepper id="select_month"  minimum="1" maximum="12" horizontalCenter="86"  verticalCenter="0" visible="false" 
			includeInLayout="false" width="53" change="numberValueChange(event)"/>
        <mx:Label text="月" id="select_monthLabel" visible="false" includeInLayout="false"/>
        </s:HGroup>

	<s:Button label="查询"  click="button2_clickHandler(event)"/>
        <mx:Button textAlign="center" label="导出"   click="button3_clickHandler(event)"/>



相应的处理函数
	/**
			 * 执行时间的改变相应事件
			 */
			private function day_change(evt:Event):void {
				var rb:DropDownList = evt.currentTarget as DropDownList;
				
				//根据选择的不同呈现的控件也不同
				if(rb.selectedIndex == 0){
					selectTime.visible = false;
					select_date.visible = false;
					select_date.includeInLayout = false;
					
					manualSetBtn.visible = false;
					manualSetBtn.includeInLayout = false;
					
					select_year.visible = false;
					select_year.includeInLayout = false;
					select_yearLabel.visible = false;
					select_yearLabel.includeInLayout = false;
					select_month.visible = false;
					select_month.includeInLayout = false;
					select_monthLabel.visible = false;
					select_monthLabel.includeInLayout = false;
					selectTo_date.visible = false;
					selectTo_date.includeInLayout = false;
					toSelect.visible = false;
					toSelect.includeInLayout = false;
				}
				if(rb.selectedIndex==1){
					selectTime.visible = true;
					select_date.visible = true;
					select_date.includeInLayout = true;
					
					manualSetBtn.visible = true;
					manualSetBtn.includeInLayout = true;
					
					select_year.visible = false;
					select_year.includeInLayout = false;
					select_yearLabel.visible = false;
					select_yearLabel.includeInLayout = false;
					select_month.visible = false;
					select_month.includeInLayout = false;
					select_monthLabel.visible = false;
					select_monthLabel.includeInLayout = false;
					selectTo_date.visible = false;
					selectTo_date.includeInLayout = false;
					toSelect.visible = false;
					toSelect.includeInLayout = false;
				}else if(rb.selectedIndex==2){
					selectTime.visible = true;
					select_date.visible = false;
					select_date.includeInLayout = false;
					
					manualSetBtn.visible = false;
					manualSetBtn.includeInLayout = false;
					
					select_year.visible = true;
					select_year.includeInLayout = true;
					select_yearLabel.visible = true;
					select_yearLabel.includeInLayout = true;
					select_month.visible = true;
					select_month.includeInLayout = true;
					select_monthLabel.visible = true;
					select_monthLabel.includeInLayout = true;
					selectTo_date.visible = false;
					selectTo_date.includeInLayout = false;
					toSelect.visible = false;
					toSelect.includeInLayout = false;
				}else if(rb.selectedIndex==3){
					selectTime.visible = true;
					select_date.visible = false;
					select_date.includeInLayout = false;
					
					manualSetBtn.visible = false;
					manualSetBtn.includeInLayout = false;
					
					select_year.visible = true;
					select_year.includeInLayout = true;
					select_yearLabel.visible = true;
					select_yearLabel.includeInLayout = true;
					select_month.visible = false;
					select_month.includeInLayout = false;
					select_monthLabel.visible = false;
					select_monthLabel.includeInLayout = false;
					selectTo_date.visible = false;
					selectTo_date.includeInLayout = false;
					toSelect.visible = false;
					toSelect.includeInLayout = false;
				}else if(rb.selectedIndex==4){
					selectTime.visible = true;
					select_date.visible = true;
					select_date.includeInLayout = true;
					
					manualSetBtn.visible = false;
					manualSetBtn.includeInLayout = false;
					
					select_year.visible = false;
					select_year.includeInLayout = false;
					select_yearLabel.visible = false;
					select_yearLabel.includeInLayout = false;
					select_month.visible = false;
					select_month.includeInLayout = false;
					select_monthLabel.visible = false;
					select_monthLabel.includeInLayout = false;
					selectTo_date.visible = true;
					selectTo_date.includeInLayout = true;
					toSelect.visible = true;
					toSelect.includeInLayout = true;
				}
			}

这样就可以实现不同的查询条件,联动不同控件的显示与隐藏效果。
(完,待续..........................)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值