Didum,
So when you say collapsible are you looking for some sort of minimizing capability for a panel? An Accordion component collapses its content by default, So I am just a little confused what you are after.
vDivBox.moveDivider(0,10000);
Didum,
It looks like you are really dealing with a VDividedBox.
If that is the case then just give it an id and then call some code like this:vDivBox.moveDivider(0,10000);
I have a CollapseContainer skinnable container that I use that can be tweaked via the skin.
https://gist.github.com/773635
Here is the Skin I use to collapse the container on the left of the of the page to a small bar.
https://gist.github.com/773640
Not at work at the moment, so I can't get a screenshot of how it works, but you pretty much let the skin do the work to resize and move the parts.
The text that you have entered is too long (13362 characters). Please shorten it to 10000 characters long.
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:esri="http://www.esri.com/2008/ags" pageTitle="Didum: Flex Facility Map, Query-zoom" styleName="plain" xmlns:samples="com.esri.ags.samples.*"> <fx:Script> <![CDATA[ import com.esri.ags.FeatureSet; import com.esri.ags.Graphic; import com.esri.ags.tasks.supportClasses.Query; import com.esri.ags.tools.NavigationTool; import com.esri.ags.utils.GraphicUtil; import mx.controls.Alert; import mx.events.DataGridEvent; import mx.events.ListEvent; import mx.events.MoveEvent; import mx.rpc.AsyncResponder; public var g:Graphic; //added public keyword private function doQuery():void { // clear the graphics layer myGraphicsLayer.clear(); var query:Query = new Query(); if(rdBtn0.selected === true){ query.outSpatialReference = myMap.spatialReference; query.returnGeometry = true; query.where = "LOWER (ADDRESS1) LIKE '%"+ fText.text + "%'"; query.outFields = ["ADDRESS1","BUILDING_TYPE","COST_CENTER","INVENTORY_NUMBER", "PHONE_NUMBER","SQUARE_FOOTAGE","UKEY,YEAR_BUILT"]; }else if(rdBtn1.selected === true){ query.outSpatialReference = myMap.spatialReference; query.returnGeometry = true; query.text = fText.text; //Inventory=ObjectID, there4 query.text query.outFields = ["ADDRESS1","BUILDING_TYPE","COST_CENTER","INVENTORY_NUMBER", "PHONE_NUMBER","SQUARE_FOOTAGE","UKEY,YEAR_BUILT"]; }else if(rdBtn2.selected === true){ query.outSpatialReference = myMap.spatialReference; query.returnGeometry = true; query.where = "YEAR_BUILT='"+ fText.text +"'"; query.outFields = ["ADDRESS1","BUILDING_TYPE","COST_CENTER","INVENTORY_NUMBER", "PHONE_NUMBER","SQUARE_FOOTAGE","UKEY,YEAR_BUILT"]; } queryTask.execute(query, new AsyncResponder(onResult, onFault)); function onResult(featureSet:FeatureSet, token:Object = null):void { if (featureSet.features.length == 0) { Alert.show("City Name search is case sensitive.\nNo data found. Please try again."); } else { var graphicsExtent:Extent = GraphicUtil.getGraphicsExtent(featureSet.features); if (graphicsExtent) { myMap.extent = graphicsExtent.expand(4); bPanel.title = "Features : " + featureSet.features.length; myGrid.visible = true; } } } function onFault(info:Object, token:Object = null):void { Alert.show(info.toString()); } } protected function vDivBox_moveHandler(event:MoveEvent):void { // TODO Auto-generated method stub vDivBox.move(0,10000); } ]]> </fx:Script> <fx:Declarations> <!--Fill Polygon with purple & draws solid blue line around Polygon on final expansion--> <esri:SimpleFillSymbol id="sms_fExp" style="solid" alpha="0.6" color="0x6600FF"> <esri:SimpleLineSymbol width="4" color="0xFF0000" style="solid"/> </esri:SimpleFillSymbol> <!-- Fill, draws solid red line around Polygon on initial expansion --> <esri:SimpleFillSymbol id="sfs_iExp" alpha="0.10" style="solid"> <esri:SimpleLineSymbol width="4" color="0x0000FF" style="solid"/> </esri:SimpleFillSymbol> <!-- Layer with US States --> <esri:QueryTask id="queryTask" showBusyCursor="true" url="http://testgeonexus/ArcGIS/rest/services/Facilities/BUILDING_SO_V/MapServer/0" useAMF="true"/> <!--navigation tool--> <esri:NavigationTool id="navTool" map="{myMap}"/> </fx:Declarations>
<!-- Left Panel --> <s:Panel id="leftPanel" height="100%" color="0x3300FF" title="Map Contents" borderVisible="false" backgroundColor="0xefefef" direction="ltr" left="5" right="5" bottom="5" top="2.5"> <mx:TabNavigator height="150" width="280" backgroundColor="0xB2BFC6" color="0x000000"> <s:NavigatorContent id="myTab1" label="Search Item" color="0xEEEEEE"> <!--<mx:Box borderStyle="solid" width="270" height="110" backgroundColor="0xEEEEEE">--> <s:BorderContainer backgroundColor="0xEEEEEE" borderVisible="false" left="5" right="5" top="0"> <s:layout> <s:HorizontalLayout horizontalAlign="left"/> </s:layout> <s:TextInput id="fText" enter="doQuery()" width="100" focusColor="0xa2d2ff" toolTip="Select a radio-button then enter some data here" color="0x66CCFF" borderColor="0xFF0000" fontSize="12" fontWeight="bold" top="10"/> <s:Button click="doQuery()" label="Query" color="0x000000"/> </s:BorderContainer> <!--Radio Buttons--> <s:VGroup horizontalAlign="left" gap="10" left="15" top="30" color="0x000000"> <mx:RadioButton id="rdBtn0" selected="true" fontWeight="bold" label="Search by City Name" labelPlacement="right"/> <mx:RadioButton id="rdBtn1" selected="false" fontWeight="bold" label="By Inventory Number" labelPlacement="right"/> <mx:RadioButton id="rdBtn2" selected="false" fontWeight="bold" label="Also by Year Built" labelPlacement="right"/> </s:VGroup> <!--</mx:Box>--> </s:NavigatorContent> <s:NavigatorContent id="myTab2" label="Map Layer" color="0xEEEEEE"> <!--Drop-DownList--> <mx:Box borderStyle="solid" left="5" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="270" height="110" backgroundColor="0xEEEEEE"> <s:DropDownList id="myURL" width="190" horizontalCenter="0" requireSelection="true" selectedIndex="1" color="0x000000"> <s:ArrayList> <fx:String>Facilities/PARCEL_SO_V</fx:String> <fx:String>Facilities/BUILDING_SO_V</fx:String> <!--<fx:String>Boundaries/Boundaries</fx:String>--> <fx:String>Basemap/Basemap_Overlay</fx:String> </s:ArrayList> </s:DropDownList> </mx:Box> </s:NavigatorContent> </mx:TabNavigator> </s:Panel> <!-- Center Panel --> <s:Panel id="centerPanel" width="100%" height="100%" color="0x3300FF" title="Facility Web Map Application" borderVisible="true" autoLayout="true" backgroundColor="0xFFFFFF" direction="ltr" left="290" right="0" bottom="5" top="2.5"> <!--Navigation ToolBar Buttons--> <s:controlBarLayout> <s:HorizontalLayout gap="10" horizontalAlign="center" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/> </s:controlBarLayout> <s:controlBarContent> <s:HGroup gap="10" width="30%"> <mx:Button click="navTool.zoomToPrevExtent();" toolTip="Previous Extent" disabledIcon="@Embed('assets/images/left.gif')" downIcon="@Embed('assets/images/left.gif')" enabled="{!navTool.isFirstExtent}" overIcon="@Embed('assets/images/left.gif')" upIcon="@Embed('assets/images/left.gif')" width="35" height="35"/> <mx:Button click="navTool.zoomToNextExtent();" toolTip="Next Extent" disabledIcon="@Embed('assets/images/right.gif')" downIcon="@Embed('assets/images/right.gif')" enabled="{!navTool.isLastExtent}" overIcon="@Embed('assets/images/right.gif')" upIcon="@Embed('assets/images/right.gif')" width="35" height="35"/> <mx:Button click="navTool.zoomToFullExtent();" toolTip="Full Extent" downIcon="@Embed('assets/images/web.gif')" overIcon="@Embed('assets/images/web.gif')" upIcon="@Embed('assets/images/web.gif')" width="35" height="35"/> <mx:Button click="{myGraphicsLayer.clear(); navTool.deactivate(); bPanel.title='Features : 0'; myGrid.visible=false;}" downIcon="@Embed('assets/images/cancel.gif')" enabled="true" toolTip="Clear Graphic" overIcon="@Embed('assets/images/cancel.gif')" upIcon="@Embed('assets/images/cancel.gif')" width="35" height="35"/> <!--More Navigation Tools--> <mx:Button id="myZoomIn" click="navTool.activate(NavigationTool.ZOOM_IN);" disabledIcon="@Embed('assets/images/zoomin.gif')" downIcon="@Embed('assets/images/zoomin.gif')" enabled="{!navTool.deactivate()}" toolTip="ZoomIn" overIcon="@Embed('assets/images/zoomin.gif')" upIcon="@Embed('assets/images/zoomin.gif')" width="35" height="35"/> <mx:Button id="myZoomOut" click="navTool.activate(NavigationTool.ZOOM_OUT);" disabledIcon="@Embed('assets/images/zoomout.gif')" downIcon="@Embed('assets/images/zoomout.gif')" enabled="{!navTool.deactivate()}" toolTip="ZoomOut" overIcon="@Embed('assets/images/zoomout.gif')" upIcon="@Embed('assets/images/zoomout.gif')" width="35" height="35"/> <mx:Button id="myPan" click="navTool.activate(NavigationTool.PAN);" disabledIcon="@Embed('assets/images/hand.gif')" downIcon="@Embed('assets/images/hand.gif')" enabled="{!navTool.deactivate()}" toolTip="Pan" overIcon="@Embed('assets/images/hand.gif')" upIcon="@Embed('assets/images/hand.gif')" width="35" height="35"/> </s:HGroup> </s:controlBarContent> <mx:VDividedBox id="vDivBox" width="100%" height="100%" move="vDivBox_moveHandler(event)"> <esri:Map id="myMap" openHandCursorVisible="false" logoVisible="false"> <esri:extent> <esri:Extent xmin="-10853631.07" ymin="4792323.73" xmax="-9933940.75" ymax="5518781.25"> <esri:SpatialReference wkid="102113"/> </esri:Extent> </esri:extent> <!--Current map layers--> <esri:ArcGISTiledMapServiceLayer visible="{getId.selectedIndex == 0}" alpha="1.0" url="http://testgeonexus/ArcGIS/rest/services/Basemap/Basemap/MapServer"/> <esri:ArcGISTiledMapServiceLayer visible="{getId.selectedIndex == 1}" alpha="1.0" url="http://testgeonexus/ArcGIS/rest/services/AerialImagery/Aerial_Imagery/MapServer"/> <esri:ArcGISDynamicMapServiceLayer id="myDynamicService" load="myDynamicService.defaultVisibleLayers()" url="http://testgeonexus/ArcGIS/rest/services/{myURL.selectedItem}/MapServer" alpha="1.0"/> <esri:GraphicsLayer id="myGraphicsLayer" symbol="{sfs_iExp}" graphicProvider="{queryTask.executeLastResult.features}"/> </esri:Map> <!--<samples:LayerTOC width="210" height="100%" mapLayer="{myDynamicService}"/>--> <mx:Panel id="bPanel" width="100%" height="38%" color="0x000000" title="Features : 0" bottom="0" left="0" right="0"> <mx:DataGrid id="myGrid" width="100%" height="100%" visible="false" dataProvider="{queryTask.executeLastResult.attributes}" "/> </mx:Panel> </mx:VDividedBox> </s:Panel> <!--Standalone ButtonBar--> <s:ButtonBar id="getId" selectedIndex="0" right="5" top="10"> <s:dataProvider> <s:ArrayList> <fx:String>Basemap</fx:String> <fx:String>Imagery</fx:String> </s:ArrayList> </s:dataProvider> </s:ButtonBar> </s:Application>