`

itemrenderer与父容器之间的交互,调用

    博客分类:
  • FLEX
阅读更多
转自他文,并做适当删除修改!

在项目渲染器访问主调用应用中的成员,可用parentDocument来引用;

主调用应用要访问项目渲染器中的成员,一般都是通过在项目渲染器先派发事件,然后在主调用应用中注册事件侦听器来实现。

例如:在项目渲染器中点击图片事件,然后通知主调用应用

<mx:Image click="this.parentDocument.imgclick(event)"
                  data="{data.label}" source="assets\tx.JPG" width="40"/>

在主调用应用中定义:

public function imgclick(evt:MouseEvent):void
{
    var img:Image=evt.currentTarget as Image;
    Alert.show(img.data.toString());
}

记住得是public的,不同类之间是无法访问私有方法的


其实上面的功能也可以用dispatchEvent来实现

先定义一个事件类

package
{
    import flash.events.Event;
    public class myEvent extends Event
    {
        public var data:String;
        public function myEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false,data:String="")
        {
            super(type, bubbles, cancelable);
            this.data=data;
        }
    }
}

然后在itemh中将事件调度到事件流中

<mx:Image click="clickHandler(event)"
          data="{data.label}" source="assets\tx.JPG" width="40"/>

private function clickHandler(evt:MouseEvent):void
{
    var img:Image=evt.currentTarget as Image;
    dispatchEvent(new  myEvent("img_click",true,true,img.data.toString()));
}

最后在主调应用中监听事件

private function initTileList():void
{
    this.tlist.addEventListener("img_click",onItemimg_click);
}

private function onItemimg_click(evt:myEvent):void
{
    Alert.show(evt.data);
}

<mx:TileList id="tlist" maxColumns="1" x="34" y="10" width="148"
    dataProvider="{arrColl_keySetup}" itemRenderer="itemh"
    creationComplete="initTileList()">
</mx:TileList>

其实也可以用<mx:itemRenderer>和<mx:Component>标签来声明itemRenderer

例如以上代码可以改为:

<mx:Script>
    <![CDATA[
        import mx.controls.Image;
        import mx.controls.Alert;

        public function imgclick(evt:MouseEvent):void
        {
            var img:Image=evt.currentTarget as Image;

            Alert.show(img.data.toString());
        }
    ]]>
</mx:Script>

<mx:ArrayCollection id="arrColl_keySetup">
    <mx:source>
        <mx:Array id="arr_keysetup">
            <mx:Object data="00" sel="false" label="aaa"/>
            <mx:Object data="11" sel="false" label="bbb"/>
            <mx:Object data="22" sel="true" label="ccc"/>
        </mx:Array>
    </mx:source>
</mx:ArrayCollection>

<mx:TileList id="tlist" maxColumns="1"
             dataProvider="{arrColl_keySetup}" 
             x="34" y="10" width="148">
    <mx:itemRenderer>
        <mx:Component>
            <mx:HBox width="145" height="41" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                <mx:VBox width="40" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                    <mx:Image click="this.parentDocument.imgclick(event)"
                        data="{data.label}" buttonMode="true" source="assets\tx.JPG" width="40"/>
                </mx:VBox>
                <mx:VBox width="95" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                    <mx:Label text="{data.label}" toolTip="{data.label}"/>
                    <mx:Image toolTip="点我查看视频" buttonMode="true"
                        source="assets\camera.JPG" width="16" height="20"/>
                </mx:VBox>
            </mx:HBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:TileList>



本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/dream8062/archive/2009/02/27/3941087.aspx
分享到:
评论

相关推荐

    Flex itemRenderer的详细教程

    当需要更复杂的逻辑或交互时,仅依靠 MXML 来定义 ItemRenderer 可能不够。这时,可以结合 MXML 和 ActionScript 来定义更复杂的 ItemRenderer。 **示例代码:** ```xml &lt;mx:itemRenderer&gt; ...

    理解_Flex_itemRenderer.pdf

    这通常涉及到在itemRenderer内部使用数据绑定和事件处理机制,来实现与数据模型的同步更新。 文章通过作者PeterEnt的背景和经历引入主题,PeterEnt是Adobe的计算机科学家,有着丰富的行业经验和深厚的技术背景。他...

    Flex项呈示器ItemRenderer

    3. **数据绑定**:通过`data`属性,我们将ItemRenderer与数据源关联起来。使用`&lt;s:Label text="{data.username}" /&gt;`这样的语句,可以将数据对象的`username`属性值绑定到Label的文本上。 4. **覆盖`...

    flex4做的itemrenderer呈现器

    `data`对象是ItemRenderer的默认属性,它包含了与当前渲染项关联的数据。 3. **样式和布局**: Flex4支持丰富的样式和布局管理。为了模仿雅虎聊天界面,可能需要添加背景色、边框,以及适当的内边距。例如: ``...

    内渲染器_ItemRenderer

    内渲染器(ItemRenderer)是Flex、Flash Builder或者ActionScript等富互联网应用程序开发中的一个重要概念,主要用于自定义组件列表项的显示方式。在基于Adobe Flex的项目中,它允许开发者根据需要为数据列表(如...

    Flex手机项目自定义List的ItemRenderer

    在实际项目中,你可以根据需要在自定义的ItemRenderer中添加更多的逻辑,比如事件监听器,以便在用户与列表项交互时执行特定的操作。 总之,通过继承和扩展IconItemRenderer,我们可以实现Flex手机项目的List组件的...

    itemrenderer help

    ItemRenderer与数据绑定** ItemRenderer通过数据绑定的方式与数据源进行关联。开发者可以通过设置ItemRenderer的属性来指定数据绑定的路径,这样就可以实现数据的动态更新。 #### 三、ItemRenderer的类型及应用 ...

    flex中的渲染器(itemrenderer)

    flex中经常会使用到渲染器,这里简要介绍一下渲染器的一些知识

    flex itemRenderer 渲染机制的概念和使用

    itemRenderer通常与List、DataGrid等数据绑定组件一起使用,通过设置其`itemRenderer`属性来指定自定义的渲染器类。 ### 二、itemRenderer的使用 1. **创建itemRenderer组件** 要创建一个itemRenderer,首先需要...

    flex与数据库交互

    这种方式使得Flex客户端与数据库之间解耦,提高了系统的可维护性和安全性。 二、Flex中的HTTPService组件 在Flex中,HTTPService组件是与服务器进行数据交换的主要工具。开发者可以使用它来发送XML、JSON或其他...

    DataGrid的itemRenderer and HeaderRenderer

    对于`checkbox`作为`itemRenderer`,我们需要在`itemRenderer`组件中添加`CheckBox`实例,并将其与数据项绑定。例如,可以使用`data`属性来获取当前行的数据对象,并根据数据对象的某个属性来决定`CheckBox`的选中...

    Flex中itemRenderer的使用简介

    ItemRenderer使得开发者能够以更个性化的方式展示数据,提升用户界面的视觉效果和交互体验。本文将深入探讨Flex中ItemRenderer的使用方法。 首先,我们需要理解ItemRenderer的基本概念。ItemRenderer是一个轻量级...

    flex itemRenderer深入学习--flex相册例子

    在Flex开发中,ItemRenderer是一种非常关键的组件,它允许我们自定义数据项在列表或网格等容器中的显示方式。本篇文章将深入探讨如何利用ItemRenderer实现一个灵活且功能丰富的相册示例,同时也会涉及Flex中的一些...

    itemRenderer 提前加载问题

    在IT行业中,"itemRenderer提前加载问题"是一个与数据可视化和UI组件相关的技术挑战,尤其在使用Flex或ActionScript开发富互联网应用程序时。这个标题暗示了开发者可能遇到的一个常见问题,即ItemRenderer(项渲染器...

    Flex ItemRenderer

    ItemRenderer允许开发者根据数据项的内容个性化呈现,提供更丰富的用户交互体验。 在Flex开发中,ItemRenderer通常是一个自定义的MXML或ActionScript类,继承自MX的ItemRenderer或Spark的ItemRenderer类。它们负责...

    Flex内联itemRenderer

    在`InlineItemRenderers`这个压缩包中,很可能包含了各种内联itemRenderer的实例,包括不同的布局、样式和交互效果。通过研究这些示例,你可以更深入地理解如何根据实际需求设计和实现内联itemRenderer。例如,你...

    理解 Flex_itemRenderer

    ### 理解 Flex_itemRenderer #### 一、Flex_itemRenderer 概述 Flex_itemRenderer 是 Flex 框架中的一个重要概念,它主要用于定义列表、数据网格等控件中的每一项是如何呈现的。通过自定义 itemRenderer,开发者...

    ActionScript_ItemRenderer

    本教程将深入探讨如何创建和使用ActionScript自定义ItemRenderer,以及如何实现与上一个示例相同的效果。 首先,理解ItemRenderer的重要性。在Flex或Flash Builder等开发环境中,列表视图(如List、DataGrid等)...

    关于flex与数据库交互

    本文将详细介绍如何实现Flex与数据库之间的交互。 #### 二、环境搭建与准备工作 为了实现Flex与数据库的交互,我们需要准备以下几个部分: 1. **数据库**: 在本例中,我们将使用MySQL作为数据库管理系统。 2. **...

    flex as actionscript datagrid 背景色 flash itemRenderer script iframe overrider 跳转到别的页面

    在Flex开发中,数据网格(DataGrid)是用于展示大量结构化数据的组件,它允许用户进行交互式浏览和操作。ActionScript是Flex的核心编程语言,用于...这样的应用既展示了数据可视化的能力,也体现了与外部资源的交互性。

Global site tag (gtag.js) - Google Analytics