`
kabike
  • 浏览: 609828 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

Flex的一点入门经验(8)--itemRenderer与外部组件的通信

    博客分类:
  • flex
阅读更多
比如我们有个如下的VO
 package com.crap.vo{
	public class Product
	{
		public function Product(name:String,price:Number)
		{
			this.name=name;
			this.price=price;
		}
		
		public var name:String;
		
		public var price:Number;
	}
}

现在想在datagrid中,把价格大于50的用红色表示,可以用如下代码
<s:DataGrid dataProvider="{productAC}">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="name"/>
				<s:GridColumn>
					<s:itemRenderer>
						<fx:Component>
							<s:GridItemRenderer>
								
								<fx:Script>
									<![CDATA[
										import com.crap.vo.Product;
										override public function set data(data:Object):void{
											super.data=data;
											var product:Product=data as Product;
											if(product.price>50){
												this.lblPrice.setStyle("color","red");
											}else{
												this.lblPrice.setStyle("color","black");
											}
										}
									]]>
								</fx:Script>
								
								<s:Label text="{data.price}" id="lblPrice">
								</s:Label>
							</s:GridItemRenderer>
						</fx:Component>
					</s:itemRenderer>
				</s:GridColumn>
			</s:ArrayList>
		</s:columns>
</s:DataGrid>

注意里面this.lblPrice.setStyle("color","black");这行代码.
因为itemrenderer是被循环使用的,系统只创建一定数量的itemrenderer来渲染所有的data,
所以如果没有这行代码,一旦一个itemrenderer设置了color为red,就再不能成为black了,

不过hard code的50真是令人不爽,因此做一个textinput,让阈值成为用户输入的数值
<?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">
	<fx:Declarations>
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import com.crap.vo.Product;
			
			import mx.collections.ArrayCollection;
			
			
			[Bindable]
			public var productAC:ArrayCollection=new ArrayCollection(
				[new Product("product1",43),
					new Product("product2",35),
					new Product("product3",108)]);
			
		]]>
	</fx:Script>
	
	<s:TextInput id="txtInputNumber" change="productAC.refresh();" >
		
	</s:TextInput>
	<s:DataGrid dataProvider="{productAC}" id="dgProduct">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="name"/>
				<s:GridColumn>
					<s:itemRenderer>
						<fx:Component>
							<s:GridItemRenderer>
								
								<fx:Script>
									<![CDATA[
										import com.crap.vo.Product;
										override public function set data(data:Object):void{
											super.data=data;
											var product:Product=data as Product;
											if(product.price> Number(outerDocument.txtInputNumber.text) ){
												this.lblPrice.setStyle("color","red");
											}else{
												this.lblPrice.setStyle("color","black");
											}
										}
									]]>
								</fx:Script>
								
								<s:Label text="{data.price}" id="lblPrice">
								</s:Label>
							</s:GridItemRenderer>
						</fx:Component>
					</s:itemRenderer>
				</s:GridColumn>
			</s:ArrayList>
		</s:columns>
	</s:DataGrid>
	
</s:Application>

注意到对datagrid的dataprovider的arraycollection调用refresh方法,能够让datagrid组件刷新状态.


不过这里itemrenderer还是要用outerDocument.txtInputNumber这样的方式访问外部控件,
其实这个limit值应该放到datagrid里面,这样datagrid和itemrenderer封装得更好一些

现在自定义一个datagrid
package com.crap.compenent{
	import mx.collections.ArrayCollection;
	
	import spark.components.DataGrid;
	
	public class CrapDataGrid extends DataGrid
	{
		public function CrapDataGrid()
		{
			super();
		}
		
		private var _limit:Number;
		
		
		public function get limit():Number
		{
			return _limit;
		}

		public function set limit(value:Number):void
		{
			_limit = value;
			ArrayCollection(this.dataProvider).refresh(); 
			
		}

	}
}

然后这样使用它
<s:TextInput id="txtInputNumber" text="">
		
	</s:TextInput>
	
	
	<compenent:CrapDataGrid dataProvider="{productAC}" id="dgProduct" limit="{Number(txtInputNumber.text)}">
		<compenent:columns>
			<s:ArrayList>
				<s:GridColumn dataField="name"/>
				<s:GridColumn>
					<s:itemRenderer>
						<fx:Component>
							<s:GridItemRenderer>
								
								<fx:Script>
									<![CDATA[
										import com.crap.compenent.CrapDataGrid;
										import com.crap.vo.Product;
										override public function set data(data:Object):void{
											super.data=data;
											var product:Product=data as Product;
											var crapDataGrid:CrapDataGrid=this.grid.dataGrid as CrapDataGrid;
											if(product.price> crapDataGrid.limit ){
												this.lblPrice.setStyle("color","red");
											}else{
												this.lblPrice.setStyle("color","black");
											}
										}
									]]>
								</fx:Script>
								
								<s:Label text="{data.price}" id="lblPrice">
								</s:Label>
							</s:GridItemRenderer>
						</fx:Component>
					</s:itemRenderer>
				</s:GridColumn>
			</s:ArrayList>
		</compenent:columns>
	</compenent:CrapDataGrid>

在GridItemRenderer中,有个grid属性能引用到grid,grid的dataGrid属性能够引用到dataGrid,
就根本没想明白Grid和DataGrid到底什么区别,文档上写得也是一塌糊涂,事实上就没找到spark Grid控件使用的例子,感觉这里的API设计得一团乱麻.
0
0
分享到:
评论

相关推荐

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

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

    Flex itemRenderer的详细教程

    ### Flex ItemRenderer 的详细教程 #### 一、ItemRenderer 概述 在 Flex 开发中,ItemRenderer 是一种非常强大的工具,它允许开发者自定义列表(List)、数据网格(DataGrid)等控件中每一项的外观和行为。通过 ...

    Flex基础培训-3-组件和布局

    8. **布局管理**:在Flex中,布局的管理通常是指如何控制布局容器及其子组件的位置、大小以及它们如何相互作用。Flex提供了一套强大的布局管理工具,这些工具使开发者能够轻松地管理组件的布局,以适应不同的屏幕...

    flex-datagrid-advancedDataGrid-demo

    在Flex编程领域,数据网格(DataGrid)是用于展示大量结构化数据的组件,而AdvancedDataGrid则是DataGrid的一个增强版,提供了更为丰富的功能和更高级的定制能力。本示例"flex-datagrid-advancedDataGrid-demo"显然...

    理解_Flex_itemRenderer.pdf

    在Flex中,itemRenderer是一个非常重要的概念,它允许开发者对列表、数据网格、树等数据组件的显示方式进行定制。 在本文中,将首先介绍内联itemRenderer的概念和使用方法,然后探讨itemRenderer的设计目的和Flex...

    Flex手机项目自定义List的ItemRenderer

    在Flex手机项目开发中,创建自定义的List组件ItemRenderer是一项常见的需求,目的是为了提供更加丰富和个性化的显示效果。本文将深入探讨如何利用IconItemRenderer来实现这一目标,同时结合具体的实例,介绍两种不同...

    Flex项呈示器ItemRenderer

    在Flex编程中,ItemRenderer是一种关键的组件,用于在数据列表或树等容器中自定义显示数据项的方式。本文将深入探讨Flex项呈示器(ItemRenderer)的概念、使用方法,以及如何根据需求定制它来展示用户信息,如头像和...

    flex4做的itemrenderer呈现器

    在Flex4中,ItemRenderer是一种强大的工具,用于自定义数据Grid、List或其他数据绑定组件中的项显示方式。本文将深入探讨如何使用Flex4创建一个ItemRenderer,以实现类似雅虎聊天界面的效果,并介绍相关的核心概念和...

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

    Flex中的itemRenderer是一种关键的组件渲染机制,它允许开发者自定义列表或数据集项的显示方式。在Flex应用中,特别是在处理数据集如ArrayCollection时,我们常常需要以不同的方式展示每个项目,例如图片、文本或者...

    理解 Flex_itemRenderer

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

    Flex内联itemRenderer

    Flex内联itemRenderer是Adobe Flex框架中的一种技术,用于自定义列表或数据网格组件中项的显示方式。在Flex开发中,我们经常会遇到需要个性化显示数据的情况,比如在一个列表中,我们希望每条数据不仅仅是一个简单的...

    Flex高级组件详细介绍

    #### 一、Flex框架概述与组件分类 Flex是一个强大的开源框架,用于构建跨平台的RIA(Rich Internet Applications)。Flex框架提供了丰富的组件库,支持开发者快速构建功能强大、界面友好的应用程序。Flex组件大致...

    flex中的渲染器(itemrenderer)

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

    Flex ItemRenderer

    Flex ItemRenderer 是Adobe Flex框架中的一个重要概念,它主要用于自定义MX和Spark组件列表视图(如List、DataGrid等)中的每一项显示样式。ItemRenderer允许开发者根据数据项的内容个性化呈现,提供更丰富的用户...

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

    8. **XML存储数据**: ML(可能是XML的误写)是常用的数据存储格式,特别适合在Flex中使用,因为它可以轻松地与ActionScript相互操作。在本例中,XML可能被用作数据源,提供播表的节目信息。 综上所述,这个项目可能...

    Flex中itemRenderer的使用简介

    在Flex开发中,ItemRenderer是一种非常关键的组件,它允许我们自定义MX或者Spark列表类(如List、DataGrid等)中的数据项显示方式。ItemRenderer使得开发者能够以更个性化的方式展示数据,提升用户界面的视觉效果和...

    Flex DataGrid 插入子组件

    在Flex开发中,DataGrid控件是一个非常常用的数据展示组件,它允许开发者以表格的形式展示大量结构化的数据。本文将深入探讨如何在Flex的DataGrid中插入子组件,以实现更丰富的用户界面和交互功能。 一、Flex ...

    Flex Tree组件的实线连接线

    Flex Tree组件是Adobe Flex框架中的一个关键元素,用于展示层次结构数据。在默认情况下,Tree组件的节点之间通常使用虚线进行连接,以表示它们之间的层级关系。然而,有时候我们可能需要自定义这些连接线,比如将...

    Flex 定制ItemRender详细解释

    - 创建一个新ActionScript类,继承自mx.controls.listClasses.ItemRenderer(对于Flex 3和4 MX组件)或s:ItemRenderer(对于Flex 4 Spark组件)。 - 在类中定义视图元素,如Label、Button等,并将数据绑定到这些...

    Flex 如何得到itemRenderer里面的内容

    本问题源于一个具体的开发场景,即如何在 Flex 应用中获取 HorizontalList 组件中 ItemRenderer 的内容并调用其 public 函数 `refresh()`。这是一个典型的需求,尤其在需要动态更新列表项内容而不依赖于事件触发的...

Global site tag (gtag.js) - Google Analytics