在Flex中,Panel组件是继承于UIComponent的,UIComponent中定义的组件尺寸信息width和height是对整个控件的宽和高而言,但Panel组件却是带有标题栏和边框,其实际能够装载内容的大小是小于width * height的。
于是,在使用Panel的时候,直接定义width和height没有实际意义,需要定义的应该是Panel的内部容器的大小。这篇文章(http://blog.csdn.net/To9m/archive/2009/10/28/4735966.aspx
)介绍了针对Flex 3中的mx:Panel的一种曲线救国的方式(通过viewMetrics.left/right/top/bottom获得左右上下的边框大小,再结合 width和height即可得到内部的实际大小),但在Flex 4的Spark组件中可以简单地通过contentGroup
属性的width和height即可获取。
示例:
<?xml version="1.0" encoding="utf-8"?>
<!-- -->
<s:Application name="Spark_Panel_contentGroup_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:controlBarContent>
<s:CheckBox id="chckBx" label="Spark Panel controlBarVisible" />
</s:controlBarContent>
<fx:Script>
<![CDATA[
protected function lbl1_enterFrameHandler(evt:Event):void {
lbl1.text = pnl.width + "x" + pnl.height;
}
protected function lbl2_enterFrameHandler(evt:Event):void {
lbl2.text = pnl.contentGroup.width + "x" + pnl.contentGroup.height;
}
]]>
</fx:Script>
<s:Panel id="pnl"
title="Spark Panel title"
controlBarVisible="{chckBx.selected}"
width="300" height="200"
horizontalCenter="0" verticalCenter="0">
<s:controlBarContent>
<s:Button label="Spark Panel control bar contents" />
</s:controlBarContent>
<mx:Form>
<mx:FormItem label="Panel width/height:">
<s:Label id="lbl1" enterFrame="lbl1_enterFrameHandler(event);" />
</mx:FormItem>
<mx:FormItem label="Panel contentGroup width/height:">
<s:Label id="lbl2" enterFrame="lbl2_enterFrameHandler(event);" />
</mx:FormItem>
</mx:Form>
</s:Panel>
</s:Application>
示例效果:
示例代码来自于Flex Examples,原文请见:Determining the inner content dimensions in a Spark Panel container in Flex 4
- 大小: 4.8 KB
分享到:
相关推荐
Flex4 Spark皮肤详细制作讲解
flex4舞台尺寸随浏览器窗口大小改变.rar
Flex程序如何获取html容器传递的URL参数值
flex自定义桌面panel,可放大缩小,不会超出桌面大小
很简单,可以直接用。不能动的panel现在可以动起来了。
Flex4 中文API chm格式
flex获得html容器传递的url参数值
该测试程序是用来测试Flex中Panel组件设置了borderSkin后,内容体和标题栏重叠的问题,并给出了解决方式。
Flex4中文帮助文档打包下载,简单易用,帮助你学习Flash Builder4
flex实现的如何删除子容器代码,对于实际开发是有很大帮助的
flex4 中文教程 详细介绍flex4 的基本用法,适合没有基础的开发人员参考
Flex4中引入了新的ui组件,提供了更好的性能监控,并且大大提高了编译速度。《Flex 4实战》是一本全面的指南,为web设计人员和开发人员提供了Flex的详细介绍。《Flex 4实战》从基础讲起,介绍了有关表单和数据的知识...
Flex4中文快速入门;
flex4中文帮助文档,只允许我上传不超过20M,所以分成两部分了
Flex4中引入了新的ui组件,提供了更好的性能监控,并且大大提高了编译速度。 《Flex4实战》是一本全面的指南,为web设计人员和开发人员提供了Flex的详细介绍。本书从基础讲起,介绍了有关表单和数据的知识,然后...
flex4中文API帮助文档,很好用,我一般把Flex_4_docs\package-summary.html存为Api的首页用,大家可以根据自己的喜好使用。
Flex布局之关于组件的大小 Flex布局之关于组件的大小
Flex 4 中文API 绝对的好东西 不是损坏的
基于flex4技术从零开发flex博客系统 : 1 开发环境配置与hello world(1) - 豆豆网 flex+blazeDs与Ext+dwr比较_蓝色幻想_百度空间 基于blazeDS的flex4与spring的程序实例步骤 - dreamming_now的专栏 - CSDN博客 在...
在FLEX4中开发带有过滤功能的DATAGRID组件