上下，左右浮动，横头

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:flexlib="http://code.google.com/p/flexlib/"
		   xmlns:mx="http://www.adobe.com/2006/mxml"
		   xmlns:views="STICK.*"
		   width="100%"
		   height="100%"
		   top="0"
		   bottom="0"
		   left="0"
		   right="0"
		   initialize="initApp();"
		   >
	
	<mx:Style>
		.right{
			horizontalDividerCursor:Embed(source="assets/report/right.gif");
		}
		
		.left{
			horizontalDividerCursor:Embed(source="assets/report/left.gif");
		}
		
    	.butt {
			fontFamily: 宋体;
			fontSize: 13;
		}
		
		 .accordion { 
        	fontSize:14px;  
        	font-weight: normal;
        	fontFamily: 宋体;
    	}

		.ssdd { 
        	top:0;
		   	bottom:0;
		   	left:0;
		   	right:0;
    	}
    	
    	
    	.vaccordion
		{
			backgroundColor: #FFFFFF;
			borderStyle: "solid";
			
			paddingBottom: -1;
			paddingLeft: -1;
			paddingRight: -1;
			paddingTop: -1;
			verticalGap: -1;
			horizontalGap: -1;
			textAlign: "left";
		}
		
		/*
		//------------------------------
		//  AccordionHeader
		//------------------------------
		*/
		
		.accordionHeader
		{
		/*	selectedFillColors: #FFFFFF, #FFFFFF; */ /* overrides the calculated fillcolors */
			
		/*	disabledIcon: null; */
			disabledSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
		/*	downIcon: null; */
			downSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
			horizontalGap: 5;
		/*	overIcon: null; */
			overSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
			paddingTop: 5;
			paddingBottom: 5;
		/*	selectedDisabledIcon: null; */
			selectedDisabledSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
		/*	selectedDownIcon: null; */
			selectedDownSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
		/*	selectedOverIcon: null; */
			selectedOverSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
		/*	selectedUpIcon: null; */
			selectedUpSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
			
		/*	upIcon: null; */
			upSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
			
			fontFamily: 宋体; 
			fontWeight:normal;
			fontSize:12;
			fontSharpness:-200;
			fontThickness:-100;
			fontGridFitType: none;
			
			
		}
		.lvbox{
			fontFamily: 宋体; 
			fontWeight:normal;
			fontSize:12;
			fontSharpness:-200;
			fontThickness:-100;
			fontGridFitType: none;
		}
    	
    </mx:Style>


	<mx:Script>
		<![CDATA[
			import mx.events.DividerEvent;
			import mx.events.FlexEvent;
			import mx.events.ChildExistenceChangedEvent;
			import flexlib.containers.SuperTabNavigator;
			import mx.core.Container;
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;
			private var selectedView:SuperTabNavigator=null;
			

			import flexlib.controls.SuperTabBar;
			import flexlib.events.TabReorderEvent;
			import mx.controls.Label;
			import mx.containers.VBox;
			import mx.containers.Canvas;
			import flexlib.controls.tabBarClasses.SuperTab;

			import mx.containers.Panel;

			[Embed(source="assets/document.png")]
			private var document_icon:Class;

			[Embed(source="assets/home.png")]
			private var home_icon:Class;


			private function initTabs():void
			{
				addTab("Home", nav, "This tab can't be closed", home_icon);

//				for (var i:int=0; i < 3; i++)
//				{
//					addTab("Tab " + (i + 1), nav);
//				}



				callLater(initNonClosableTab);
			}

			private function initNonClosableTab():void
			{
				nav.setClosePolicyForTab(0, SuperTab.CLOSE_NEVER);
			}

			private function addTab(lbl:String, navigator:SuperTabNavigator, contentString:String=null, icon:Class=null):void
			{
				for (var i:int=0; i < nav.numChildren; i++)
				{
					var vb:VBox=navigator.getChildAt(i) as VBox;
					trace(vb.label);
					if (vb.label == lbl)
					{
						nav.selectedIndex=i;
						return;
					}
				}

				if (lbl == "")
					lbl="(Untitled)";

				var curNum:Number=nav.numChildren + 1;

				var child:VBox=new VBox();

				child.setStyle("closable", true);
				//child.setStyle("closable", true);
				child.styleName ="ssdd";
				child.label=lbl;

				if (icon)
				{
					child.icon=icon;
				}
//				else
//				{
//					child.icon=document_icon;
//				}

				//var label:Label=new Label();
				//label.text=contentString == null ? "Content for: " + lbl : contentString;

				//	var aaaa:Array = navigator.getChildAt(;


				if (contentString == 'u1')
				{
					child.addChild(u1);
					u1.visible=true;
				}
				if (contentString == 'u2')
				{
					child.addChild(u2);
					u2.visible=true;
				}
				if (contentString == 'u3')
				{
					child.addChild(u3);
					u3.visible=true;
				}
				if (contentString == 'u4')
				{
					child.addChild(u4);
					u4.visible=true;
				}
				if (contentString == 'u5')
				{
					child.addChild(u5);
					u5.visible=true;
				}
				if (contentString == 'u6')
				{
					child.addChild(u6);
					u6.visible=true;
				}
				if (contentString == 'u7')
				{
					child.addChild(u7);
					u7.visible=true;
				}
				
				if (contentString == 'u8')
				{
					child.addChild(u8);
					u8.visible=true;
				}
				navigator.addChild(child);

				nav.selectedIndex=nav.numChildren - 1;
//				navigator.addEventListener(ChildExistenceChangedEvent.CHILD_ADD,addOK);


			}


			/* The following two functions are a bit of a hack to try to get the
			 * tab navigator to refresh the display and resize all the tabs. When
			 * you change stuff like tabWidth (which is a style) then the tab
			 * navigator has a hard time re-laying out the tabs. Adding and
			 * removing a child can sometimes trigger it to re-layout the tabs.
			 * I don't know, but just don't change tabWdith or horizontalGap or whatever
			 * else at runtime, OK? Pick some values and stick with them.
			 */
			private function invalidateLater():void
			{
				var child:Canvas=new Canvas();
				nav.addChild(child);
				nav.removeChild(child);
				callLater(invalidateNav);


			}

			private function invalidateNav():void
			{
				nav.invalidateDisplayList();

			}

			private function tabsReordered(event:TabReorderEvent):void
			{
				var tabBar:SuperTabBar=event.currentTarget as SuperTabBar;
				tabBar.setChildIndex(tabBar.getChildAt(event.oldIndex), event.newIndex);

			}


			private function initApp():void
			{
				initTabs();
			}

			private function open(e:Event):void
			{
				if (e.target.id == "tab1")
				{
					//selectedView = viewStack.getChildByName("u1") as Container  as SuperTabNavigator;
					addTab("用户信息", nav, 'u1')
						//nav.selectedChild=nav.getChildByName("tab1") as Container;
						//viewStack.selectedChild = u1;
				}
				if (e.target.id == "tab2")
				{
					//selectedView = viewStack.getChildByName("tab2") as Container;
					addTab("区域维护", nav, 'u2')
						//viewStack.selectedChild = u2;
				}
				if (e.target.id == "tab3")
				{
					//selectedView = viewStack.getChildByName("tab3") as Container;
					addTab("分项信息", nav, 'u3')
						//viewStack.selectedChild = u3;
				}
				if (e.target.id == "tab4")
				{
					//selectedView = viewStack.getChildByName("tab4") as Container;
					addTab("耗能设备", nav, 'u4')
						//viewStack.selectedChild = u4;
				}
				if (e.target.id == "tab5")
				{
					//selectedView = viewStack.getChildByName("tab5") as Container;
					addTab("权限设置", nav, 'u5')
						//viewStack.selectedChild = u5;
				}
				if (e.target.id == "tab6")
				{
					//selectedView = viewStack.getChildByName("tab6") as Container;
					addTab("检测设备", nav, 'u6')
						//viewStack.selectedChild = u6;
				}
				if (e.target.id == "tab7")
				{
					//selectedView = viewStack.getChildByName("tab7") as Container;
					addTab("厂家信息", nav, 'u7')
						//viewStack.selectedChild = u7;
				}
				if (e.target.id == "tab8")
				{
					//selectedView = viewStack.getChildByName("tab7") as Container;
					addTab("设备预案", nav, 'u8')
						//viewStack.selectedChild = u7;
				}

			}

			public function divider_handler(event:DividerEvent):void
			{
				if (hDividedBox.getChildAt(0).width == 0)
				{
					rightResize.end();
					rightResize.play();
				}
				else
				{
					leftResize.end();
					leftResize.play();
				}
			}

			public function changDeviderStyle(event:Event):void
			{

				if (hDividedBox.getChildAt(0).width == 0)
				{
					hDividedBox.styleName="right";
				}
				else
				{
					hDividedBox.styleName="left";
				}
			}
		]]>

	</mx:Script>

	<mx:Grid id="grid"
			 width="100%"
			 height="100%"
			 horizontalGap="0"
			 verticalGap="0"
			 >
		<mx:GridRow width="100%"
					height="100%">
			<mx:GridItem width="100%"
						 height="100%"
						 >
				<mx:HDividedBox id="hDividedBox"
								width="100%"
								height="100%"
								dividerRelease="divider_handler(event)"
								mouseMove="changDeviderStyle(event)">
					<mx:Canvas id="leftCanv"
							   width="150"
							   height="100%"
							   >
						<flexlib:VAccordion id="accordion2"
											width="100%"
											height="100%" headerStyleName="accordionHeader" styleName="vaccordion">
							<!-- Define each panel using a VBox container. -->
							<mx:VBox label="基础信息" verticalGap="0">
								<mx:LinkButton id="tab1"
											   click="open(event)"
											   label="用户信息"
											    styleName="lvbox"/>
								<mx:LinkButton id="tab2"
											   click="open(event)"
											   label="区域维护"
											   styleName="lvbox"/>
								<mx:LinkButton id="tab3"
											   click="open(event)"
											   label="分项信息"
											   styleName="lvbox"/>
								<mx:LinkButton id="tab4"
											   click="open(event)"
											   label="耗能设备"
											   styleName="lvbox"/>
								<mx:LinkButton id="tab5"
											   click="open(event)"
											   label="权限设置"
											   styleName="lvbox"/>
								<mx:LinkButton id="tab6"
											   click="open(event)"
											   label="检测设备"
											   styleName="lvbox"/>
								<mx:LinkButton id="tab7"
											   click="open(event)"
											   label="厂家信息"
											   styleName="lvbox"/>
							</mx:VBox>

							<mx:VBox label="预约信息维护" >
								<mx:LinkButton id="tab8"
											   click="open(event)"
											   label="设备预约"
											   styleName="lvbox"/>
							</mx:VBox>

							<mx:VBox label="专家信息维护">
								<mx:LinkButton id="other1"
											   click="open(event)"
											   label="专家信息1"
											   styleName="lvbox"/>
							</mx:VBox>

							<mx:VBox label="其他信息">
								<mx:LinkButton id="other2"
											   click="open(event)"
											   label="其他信息1"
											   styleName="lvbox"/>
							</mx:VBox>

						</flexlib:VAccordion>
					</mx:Canvas>
					<mx:Canvas id="rightCanv"
							   width="100%"
							   height="100%"
							   backgroundColor="#bec3ca">


						<flexlib:SuperTabNavigator id="nav"
												   scrollSpeed="25"
												   dropShadowEnabled="true"
												   stopScrollingEvent="{MouseEvent.MOUSE_UP}"
												   startScrollingEvent="{MouseEvent.MOUSE_DOWN}"
												   width="100%"
												   height="100%"
												   horizontalGap="0"
												   tabWidth="180" fontSize="12" fontFamily="宋体" fontWeight="normal"
												   fontSharpness="-200" fontThickness="-100"
												   tabHeight="30"
												   backgroundColor="#f0f6e9"  
												   closePolicy="{SuperTab.CLOSE_ROLLOVER}">
						</flexlib:SuperTabNavigator>
					</mx:Canvas>
				</mx:HDividedBox>
			</mx:GridItem>

		</mx:GridRow>
	</mx:Grid>
	<views:STICK_USER id="u1"
					  visible="false"/>

	<views:STICK_GROP_TYPE id="u2"
						   visible="false"/>

	<views:STICK_ENERGY_ITEM id="u3"
							 visible="false"/>

	<views:STICK_EQUIP id="u4"
					   visible="false"/>

	<views:STICK_RIGHT id="u5"
					   visible="false"/>

	<views:STICK_EQUIP id="u6"
					   visible="false"/>

	<views:STICK_FACTORY id="u7"
						 visible="false"/>

	<views:set_plan id="u8"
						 visible="false"/>
						 
	<mx:Resize id="leftResize"
			   target="{leftCanv}"
			   widthTo="0"/>
	<mx:Resize id="rightResize"
			   target="{leftCanv}"
			   widthTo="150"/>
</mx:Canvas>