<?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" minWidth="955" minHeight="600" xmlns:mdi="http://code.google.com/p/flexlib/" creationComplete="applicationCreationComplete(event)"> <fx:Declarations> </fx:Declarations> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace mdi "http://code.google.com/p/flexlib/"; @namespace tab "flexlib.controls.tabBarClasses.*"; mx|ProgressBar { fontSize:10; trackHeight:15; paddingRight:20; } tab|SuperTab{ tabCloseButtonStyleName:SuperTabButtonStyle; } .SuperTabButtonStyle{ icon:Embed(source="com/xyw/sys/image/close.png"); downSkin:Embed(source="com/xyw/sys/image/close.png"); overSkin:Embed(source="com/xyw/sys/image/close.png"); upSkin:Embed(source="com/xyw/sys/image/close.png"); } mdi|SuperTabNavigator{ tabStyleName:myTab; firstTabStyleName:myTab; lastTabStyleName:myTab; } .myTab{ contentBackgroundColor:#FF0000; fontFamily:宋体; fontSize:15; fontWeight:bold; up-skin:ClassReference("com.xyw.sys.custom.skin.SuperTabNavigator"); down-skin:ClassReference("com.xyw.sys.custom.skin.SuperTabNavigator"); over-skin:ClassReference("com.xyw.sys.custom.skin.SuperTabNavigator"); disabled-skin:ClassReference("com.xyw.sys.custom.skin.SuperTabNavigator"); selected-up-skin:ClassReference("com.xyw.sys.custom.skin.SelectedSuperTabNavigator"); selected-down-skin:ClassReference("com.xyw.sys.custom.skin.SelectedSuperTabNavigator"); selected-over-skin:ClassReference("com.xyw.sys.custom.skin.SelectedSuperTabNavigator"); selected-disabled-skin:ClassReference("com.xyw.sys.custom.skin.SelectedSuperTabNavigator"); } mx|DividedBox { /*fontWeight:bold*/ fontWeight:normal; } </fx:Style> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Image; import mx.controls.LinkButton; import mx.events.DividerEvent; import mx.events.FlexEvent; import spark.components.NavigatorContent; import spark.layouts.VerticalLayout; [Bindable] private var arrayCollection:ArrayCollection = new ArrayCollection([ {neName:"教工路文一路路口相机_4", neType:"相机" , neAlarmType:"设备告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"2级"}, {neName:"学院路文一路路口相机_3", neType:"相机" , neAlarmType:"环境告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"3级"}, {neName:"文一路莫干山路路口相机_1", neType:"相机" , neAlarmType:"连接通信告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"1级"}, {neName:"文一路莫干山路路口相机_3", neType:"相机" , neAlarmType:"性能告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"4级"} ]); private var menusString:String = "<menus><menuitem label='系统维护'><menuitem label='系统用户管理'></menuitem><menuitem label='系统权限管理'></menuitem><menuitem label='系统角色管理'></menuitem></menuitem><menuitem label='信息申请'><menuitem label='农村低保申请'><menuitem label='家庭基本信息登记'></menuitem><menuitem label='房产信息登记'></menuitem><menuitem label='车辆信息登记'></menuitem><menuitem label='保险信息登记'></menuitem><menuitem label='工商信息登记'></menuitem><menuitem label='税务信息登记'></menuitem><menuitem label='经济信息登记'></menuitem></menuitem><menuitem label='城市低保申请'><menuitem label='家庭基本信息登记'></menuitem><menuitem label='房产信息登记'></menuitem><menuitem label='车辆信息登记'></menuitem><menuitem label='保险信息登记'></menuitem><menuitem label='工商信息登记'></menuitem><menuitem label='税务信息登记'></menuitem><menuitem label='经济信息登记'></menuitem></menuitem><menuitem label='综合信息申请'><menuitem label='家庭基本信息登记'></menuitem></menuitem></menuitem><menuitem label='信息初审'></menuitem><menuitem label='信息审核'></menuitem><menuitem label='信息审批'></menuitem><menuitem label='信息查询'></menuitem></menus>"; private var menusXML:XML = new XML(menusString); [Bindable] [Embed('com/xyw/sys/image/account.gif')] private var accountIcon:Class; [Bindable] [Embed('com/xyw/sys/image/manage.gif')] private var manageIcon:Class; [Bindable] [Embed('com/xyw/sys/image/manager.gif')] private var managerIcon:Class; [Bindable] [Embed('com/xyw/sys/image/other.gif')] private var otherIcon:Class; [Bindable] [Embed('com/xyw/sys/image/people.gif')] private var peopleIcon:Class; private function applicationCreationComplete(event:FlexEvent):void { this.tree.showRoot = false; this.tree.dataProvider = this.menusXML; this.alarmGrid.dataProvider = this.arrayCollection; } public function deleteAlarmRecord():void{ this.arrayCollection.removeItemAt(alarmGrid.selectedIndex); } public function confirmAlarmInfo():void{ this.arrayCollection.getItemAt(alarmGrid.selectedIndex).confirmStatus = "已确认"; this.alarmGrid.dataProvider = this.arrayCollection; } ]]> </fx:Script> <s:Panel id="loginPanle" width="350" title="系统登录" height="150" chromeColor="#2088c7" horizontalCenter="0" verticalCenter="0"> <s:VGroup width="100%" horizontalCenter="0" verticalCenter="0"> <s:HGroup width="100%" paddingLeft="30"> <s:Label text="用户名:" paddingTop="3" fontSize="16"/><s:TextInput id="username" width="160"/><s:Button label="重置"/> </s:HGroup> <s:HGroup width="100%" paddingLeft="30"> <s:Label text="密 码:" paddingTop="3" fontSize="16"/><s:TextInput id="password" width="160"/><s:Button label="登录"/> </s:HGroup> </s:VGroup> </s:Panel> <mdi:MDICanvas visible="false" id="mdiCanvas" backgroundColor="#2088c7" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%"> <s:VGroup width="100%" height="100%" gap="0"> <s:Group width="100%" height="70"> <s:layout> <s:HorizontalLayout horizontalAlign="right" verticalAlign="bottom"/> </s:layout> <s:Rect width="100%" height="100%"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="#cbe5ea"/> <s:GradientEntry color="#429edd"/> </s:LinearGradient> </s:fill> </s:Rect> </s:Group> <s:Group width="100%" height="8"> <s:Rect width="100%" height="100%"> <s:fill> <s:SolidColor color="#2088c7"/> </s:fill> </s:Rect> </s:Group> <s:HGroup width="100%" height="100%" gap="0"> <s:Group width="8" height="100%"> <s:Rect width="100%" height="100%"> <s:fill> <s:SolidColor color="#2088c7"/> </s:fill> </s:Rect> </s:Group> <!-- <s:Group width="5" height="100%"> <s:Rect width="100%" height="100%"> <s:fill> <s:LinearGradient> <s:GradientEntry color="#2088c7"/> <s:GradientEntry color="#ffffff"/> </s:LinearGradient> </s:fill> </s:Rect> </s:Group> --> <!-- <s:VGroup width="15%" height="100%" gap="0"> <mx:Tree id="tree" labelField="@label" fontWeight="bold" chromeColor="#2088A7" fontSize="15" paddingLeft="5" paddingBottom="5" paddingRight="5" paddingTop="5" borderVisible="false" width="100%" height="100%" borderAlpha="0"> </mx:Tree> </s:VGroup> --> <!-- <s:Group width="5" height="100%"> <s:Rect width="100%" height="100%"> <s:fill> <s:LinearGradient> <s:GradientEntry color="#ffffff"/> <s:GradientEntry color="#2088c7"/> </s:LinearGradient> </s:fill> </s:Rect> </s:Group> <s:Group width="5" height="100%"> <s:Rect width="100%" height="100%"> <s:fill> <s:SolidColor color="#2088c7"/> </s:fill> </s:Rect> </s:Group> --> <mx:HDividedBox width="100%" height="100%" paddingTop="-3"> <mx:Tree id="tree" labelField="@label" chromeColor="#2088A7" fontSize="14" rowHeight="25" borderVisible="false" width="10%" height="100%" borderAlpha="0"/> <mdi:SuperTabNavigator dragEnabled="false" id="superTabNavigator" width="85%" height="100%" borderAlpha="0"> <mx:VBox width="100%" height="100%" label="档案登记" paddingLeft="10" paddingRight="10"> <s:DataGrid id="alarmGrid" rowHeight="25" width="100%" height="500" requestedRowCount="4" skinClass="com.xyw.sys.custom.skin.CustomDataGridSkin" alternatingRowColors="[#FFFFFF,#EEEEEE]"> <s:columns> <s:ArrayList> <s:GridColumn dataField="neName" headerText="名称"></s:GridColumn> <s:GridColumn dataField="neType" headerText="类型"></s:GridColumn> <s:GridColumn dataField="removeStatus" headerText="清除状态"></s:GridColumn> <s:GridColumn dataField="confirmStatus" headerText="确认状态"></s:GridColumn> <s:GridColumn headerText="操作"> <s:itemRenderer> <fx:Component> <s:GridItemRenderer> <s:HGroup> <mx:LinkButton toolTip="清除" label="清除" click="outerDocument.deleteAlarmRecord();" textDecoration="underline" color="#2066CF" fontWeight="normal"/> <mx:LinkButton toolTip="确认" label="确认" click="outerDocument.confirmAlarmInfo()" textDecoration="underline" color="#2066CF" fontWeight="normal"/> </s:HGroup> </s:GridItemRenderer> </fx:Component> </s:itemRenderer> </s:GridColumn> </s:ArrayList> </s:columns> </s:DataGrid> </mx:VBox> <mx:VBox width="85%" height="100%" label="档案修改"> <s:Panel width="100%" height="100%" title="Panel"> </s:Panel> </mx:VBox> <mx:VBox width="85%" height="100%" label="信息审核"> <s:Panel width="100%" height="100%" title="Panel"> </s:Panel> </mx:VBox> <mx:VBox width="85%" height="100%" label="信息审批"> <s:Panel width="100%" height="100%" title="Panel"> </s:Panel> </mx:VBox> </mdi:SuperTabNavigator> </mx:HDividedBox> <s:Group width="5" height="100%"> <s:Rect width="100%" height="100%"> <s:fill> <s:SolidColor color="#2088c7"/> </s:fill> </s:Rect> </s:Group> </s:HGroup> <s:Group contentBackgroundColor="#2088c7" width="100%" height="25"> <s:Rect width="100%" height="100%" top="0" left="0" right="0" bottom="0"> <s:fill> <s:SolidColor color="#2088c7"/> </s:fill> </s:Rect> <s:HGroup width="100%" height="25" verticalAlign="middle" horizontalAlign="center"> <s:Label text="郑州新益旺电子科技有限公司" width="70%" height="100%" textAlign="right" verticalAlign="middle"/> <mx:ProgressBar visible="true" width="30%" height="15" label="加载中..." direction="right" labelPlacement="center"/> </s:HGroup> </s:Group> </s:VGroup> </mdi:MDICanvas> </s:Application>
名字:SelectedSuperTabNavigator.mxml
<?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> <fx:Declarations> </fx:Declarations> <s:Rect left="1" right="1" top="1" bottom="0" topLeftRadiusY="6" topRightRadiusY="6" topLeftRadiusX="6" topRightRadiusX="6"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="#FFFFFF" alpha="1" /> <s:GradientEntry color="#FFFFFF" alpha="1" /> </s:LinearGradient> </s:fill> </s:Rect> </s:SparkSkin>
名字:SuperTabNavigator.mxml
<?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="78" height="66"> <fx:Declarations> </fx:Declarations> <s:Rect left="1" right="1" top="1" bottom="0" topLeftRadiusY="6" topRightRadiusY="6" topLeftRadiusX="6" topRightRadiusX="6"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="#ffffff" alpha="1"/> <s:GradientEntry color="#2088c7" alpha="1"/> </s:LinearGradient> </s:fill> </s:Rect> </s:SparkSkin>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
第一个图标显示不完全:
FLex3中弹出窗口包含TabNavigator时标签页的标题显示不完全的问题及解决方法
解决方法有3种：
1.增加样式activeTabStyle并设置字体不加粗。下面的代码为了统一标题的样式，也设置了TabNavigator的tabStyleName样式。
<?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="300" fontSize="12"> <mx:Style> .tabStyle, .activeTabStyle { font-weight:normal } </mx:Style> <mx:Script> <!--[CDATA[ import mx.managers.PopUpManager; ]]--> </mx:Script> <mx:TabNavigator width="100%" height="100%" creationPolicy="all" tabStyleName="tabStyle"> <mx:Canvas label="基本信息" width="100%" height="100%"> <mx:Button x="39" y="10" label="按钮"/> </mx:Canvas> <mx:Canvas label="基信本息" width="100%" height="100%"> <mx:Label id="msgLbl" x="39" y="10" text="标签"/> </mx:Canvas> </mx:TabNavigator> <mx:ControlBar horizontalAlign="right"> <mx:Button id="closeBtn" label="Close" click="PopUpManager.removePopUp(this)"/> </mx:ControlBar> </mx:Panel>
2.保证最后一个文本控件的字体是加粗的。如以上的代码如果TabNavigator的creationPolicy是默认的auto，则由于closeBtn默认是加粗的，因此可以不设置。如果creationPolicy是all，则必须保证最后一页的最后一个控件的字体是加粗的，也可以放一个不显示的Label，如
<mx:Label includeInLayout="false" visible="false" text="隐藏的Label" fontWeight="bold"/>
3.在第一个标签页的label后加一个空格，如
<mx:Canvas label="基本信息 " width="100%" height="100%">
经试验，所需空格的数量标题的长度有关，当标题只有一个字时不用加空格，之后每增加4个字要加一个空格。
如果弹出窗口时不执行PopUpManager.centerPopUp()，或者不用弹出窗口、TabNavigator直接显示在Application中，此时TabNavigator显示出来后会再刷新一次从而显示正确的标题，因此不需做任何改动。
1347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
