Flex试用Label控件作为默认的项目渲染器.这个默认渲染的作用只是渲染提供给它的文本,当指定一个项目渲染器的时候,
Flex为集合中的每个对象创建一个渲染器实例
创建每个渲染器时,会出发creationComplete事件
creationComplete的监听器函数检查下一个对象,确定是否已经为该对象创建了一个渲染器.如果还没有,就会创建一个新的渲染器,冰将其data属性设为数据对象自身,这样就可以在需要时提取被调用的任何必要的值.
下面是使用代码
具体过程如下
但是有一个地方需要注意
处于性能方面考虑,Flex会重用已有的行--如果需要显示1000个对象,那么它不会同时生成1000行;相反,它会生成与在当前屏幕上显示所需的行数相同的行,如果行数为1,这就意味着没绘制一行的时候.可能会存在一些时间上的延迟,因为下一行数据并不是在滚动事件发生前加载的
为了避免这个问题,需要按照下列步骤进行操作
- 继续试用creationComplete事件初始化项目渲染器,例如,ArrayCollection可能尚未被填充.或者,也可以重写data设置器
- 试用dataChange事件检查是否需要加载后面一些行和前面一些行
- 重写UIComponent类的以下方法:invalidatedisplay,updatedisplayList.invalidateProperties,updateProperties和updatedisplayList.一定要在其中每个方法中调用super,并添加创建后面一些行和前面一些行的逻辑,以便用户滚动鼠标时能够显示它们,但是将这些行各自的visbile属性设为false
下面是改进后的项目渲染器
<?xml version="1.0" encoding="utf-8"?> <mx:HBox 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="100%" creationComplete="initdisplay()" dataChange="checkEmail()" > <fx:Script> <![CDATA[ import flash.net.navigatetoURL; import mx.events.FlexEvent; private function initdisplay():void { //emailButton.visible = false; } private function checkEmail():void { if(data.email.length>0) emailButton.visible = true; else emailButton.visible = false; } private function sendMail():void { var u:URLRequest = new URLRequest("mailto:" + data.email); navigatetoURL(u,"_self"); } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <s:Button id="emailButton" visible="false" label="Send Email" click="sendMail()" </mx:HBox>
下面是使用代码
<?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"> <s:layout> <s:VerticalLayout paddingLeft="20" paddingTop="20"/> </s:layout> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> <s:ArrayCollection id="myAC"> <fx:Object email="hello@qq.com" firstName="zhang" lastName="san" phone="123456"/> <fx:Object email="hello@qq.com" firstName="li" lastName="si" phone="654321"/> </s:ArrayCollection> </fx:Declarations> <mx:DataGrid id="dg" width="500" height="100" dataProvider="{myAC}"> <mx:columns> <mx:DataGridColumn headerText="Name"> <mx:itemRenderer> <fx:Component> <mx:Text text="{data.firstName} {data.lastName}"/> </fx:Component> </mx:itemRenderer> </mx:DataGridColumn> <mx:DataGridColumn headerText="Email" itemRenderer="CH10.myRenderer"/> </mx:columns> </mx:DataGrid> </s:Application>其中还用到了行内渲染器
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。