Flex 如何得到itemRenderer里面的内容

前几天在写ViSR的时候,碰到了一个问题,问题如下:
1、定义了一个HorizontalList类型的可视化组件:MyHorizontalList。
2、MyHorizontalList的属性:dataProvider。它绑定了一个外部数据。(假设这个外部数据共6条)
3、MyHorizontalList的属性:itemRenderer,它使用了自定义的组件:MyItemRenderer
4、在MyItemRenderer里面定义了一个public类型的functon:refresh()
5、程序初始化的时候,众所周知如果要对MyItemRenderer里面的item进行赋值的话,要使用data.XXX的形式,同时应该有6个MyItemRenderer被建立起来,同时它们都被HorizontalList的渲染器itemRenderer呈现了出来。

以上的情况一切都很顺利,顺心是不是呢:)

问题出现了:当Flex App运行后,我要动态的调用MyHorizontalList包含的MyItemRenderer里面的public funciton:refresh(),即对全部的MyItemRenderer里面的refresh都需要调用。而这个调用并不需要使用使用任何的event(例如itemClick这个event)。

探索方式:
1、遍历MyHorizontalList里面的child,发现只有三个。
2、自动遍历触发itemClick event,可以实现,但是效率是一个问题(做大型的Flex App时,一定要注意效率这个问题。)

无奈下只能去HorizontalList.as里面搜寻答疑,结果终于让我结合Adobe Doc发现了这个问题的解决方法。

这是寻找的思路:
HorizontalList是继承与ListBase,而ListBase属于mx.controls.listClasses包下面的class,因此最有希望的是在mx.controls.listClasses这个下面

实现方法:
1、在探索阶段使用第一种方式的时候,会得到MyHorizontalList共有三个child,而我们就需要它的最后一个child。
即:MyHorizontalList.getChildAt( 2 )
2、请大家一定要注意:它最后一个child是一个ListBaseContentHolder类型的变量,而ListBaseContentHolder是存在于mx.controls.listClasses.ListBaseContentHolder里面的。
因此我们需要手动引入如下的class:
import mx.controls.listClasses.ListBaseContentHolder;
var myHList : ListBaseContentHolder = MyHorizontalList.getChildAt( 2 ) as ListBaseContentHolder;
通过上面的代码就得到了myHList。(注意它的类型是:ListBaseContentHolder )
3、ListBaseContentHolder里面有一个public method:listItems,它的定义如下:
原文:An Array of Arrays that contains the item renderer instances that render each data provider item.
翻译:一个由数组组成的 Array,其中包含用于显示dataProvider提供的项目渲染器实例。
通过上面的翻译不难看出,listItems就是我们要使用的method,即包含了MyItemRenderer的数组。

4、以下是的source就比较简单了:
//得到MyRendererArr
var MyRendererArr : Array = listBase.listItems[ 0 ] as Array ;
//遍历MyRendererArr
for ( var i : int = 0; i < MyRendererArr .length; i ++ ) {
//每一个MyRendererArr[ i ]都是一个实例的MyItemRenderer
var temp : MyItemRenderer= MyRendererArr [ i ] as MyItemRenderer;
//即我想要的最终结果
temp.refresh();
}

是不是很简单,其实上面的方式适用于任何继承与ListBase的组件。

关于ListBase的介绍:
它是所有提供项目列表的基类,即它是itemRenderer的基类。

(0)

相关推荐

  • Flex 如何得到itemRenderer里面的内容

    前几天在写ViSR的时候,碰到了一个问题,问题如下: 1.定义了一个HorizontalList类型的可视化组件:MyHorizontalList. 2.MyHorizontalList的属性:dataProvider.它绑定了一个外部数据.(假设这个外部数据共6条) 3.MyHorizontalList的属性:itemRenderer,它使用了自定义的组件:MyItemRenderer 4.在MyItemRenderer里面定义了一个public类型的functon:refresh() 5.程

  • Flex读取txt文件中的内容报错原因分析及解决

    Flex读取txt文件中的内容 1.具体错误如下  2.错误原因 读取文件不存在 复制代码 代码如下: var file:File = new File(File.applicationDirectory.nativePath+"/phone.txt"); 3.解决办法 将文件导入进去

  • 一个手写的vue放大镜效果

    组件使用less,请确保已安装loader 本组件为放大镜组件,传参列表为: •width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍 •picList:必传,传入图片列表 使用示例: script: import mirror from 'xx/mirror' export default { components:{ mirror }, data(){ return { width:300, picList:[ xxxxxx, xxxxxx ], } } } html:

  • vue卡片式点击切换图片组件使用详解

    本文实例为大家分享了vue卡片式点击切换图片组件,供大家参考,具体内容如下 因为公司业务的问题,最近在写vue项目,有了一个卡片图片的点击的需求,自己又不想写动画效果,就偷个懒,采用vue是以数据驱动的原理,写了一个不太完整的vue组件,为了简单,就直接上代码吧 全部代码 未进行props传参设置,以后完善(简单最好嘛) <template> <!-- *以数据驱动的card式展示图片(无动画效果) * --> <div class="cardBanner"

  • 深入了解JavaScript中正则表达式的使用

    目录 一.什么是正则表达式 1.正则表达式特点 2.正则表达式的使用 二.正则表达式中的特殊字符 1.正则表达式的组成 2.边界符 3.字符类 4. 量词符 5.括号总结 6.预定义类 三.String类中的方法 1.match()方法 2.search()方法 3.split()方法 4.replace()方法 一.什么是正则表达式 是用于匹配字符串中字符组合的模式.在 JavaScript中,正则表达式也是对象. 正则表通常被用来检索.替换那些符合某个模式(规则)的文本,例如验证表单:用户名

  • flex 遍历Object对象内容的实现代码

    一直以为遍历Object只能obj.name这种方式,今天做数据比较,才发现 复制代码 代码如下: var g2:Object = expensesAC.getItemAt(0);        for(var i:Number=0;i<=23;i++){         if(g2["times"+i]=="0"){             num--;         }else{            d2g+=g2["times"+

  • Flex 创建复数行文本内容的List

    复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationCompl

  • FLEX 仿Google联想框效果

    首先是事件源,也就是从何而起,如下的一个输入框: 复制代码 代码如下: <mx:FormItem label="集团客户:" width="42%"> <!--change1--> <mx:TextInput id="txtAssociation" width="235" maxChars="32" change="associate();"/> &l

  • 全面了解flex的用途

    一.可以利用flex来布局一个div在另一个div里面水平垂直居中 如:html代码: <div class="container"> <div class="box"> </div> </div> css代码: .container{ width:600px; height:400px; border:1px solid blue; display: flex; justify-content:center; ali

  • 手把手教你使用flex eclipse整合spring

    最先下载FlashBuilder_4_7_LS10_win64.exe试了几个eclipse安装插件都没成功,包括myeclipse8.5.spring sts2.9.2.eclipse3.5.j2eeeclipse版本4.2.0,后来搞了一个FlashBuilder_4_LS10.exe安装完找不到插件安装文件原来这个是单独版,必须插件版才行,最后下载FlashBuilder_4_Plugin_LS10.exe终于配置成功了,myeclipse8.5不行,spring sts可以了. spri

随机推荐