在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;
}
}
这样就可以实现不同的查询条件,联动不同控件的显示与隐藏效果。
(完,待续..........................)