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

Flex的一点入门经验(9)--强制更新datagrid

    博客分类:
  • flex
阅读更多
比如我们有个如下的VO

	[Bindable]
	public class Product
	{
		public function Product(name:String,price:Number)
		{
			this.name=name;
			this.price=price;
		}
		
		public var name:String;
		
		public var price:Number;
	}

在下面的文件中,分别用一个mx的datagrid和一个spark的datagrid来显示这个vo的集合
<?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" >
	<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)]);
			
			private function change():void{
				var p:Product =productAC.getItemAt(1) as Product;
				p.price=855;
			}
			
		]]>
	</fx:Script>
	
	<s:Button label="button" click="change();"/>
	
	<mx:DataGrid dataProvider="{productAC}" id="mxDG">
		
	</mx:DataGrid>

	<s:DataGrid  dataProvider="{productAC}" id="sparkDG">
		
	</s:DataGrid>
	
</s:Application>


发现点击了button以后,两个组件都更新了,这是因为两个组件的dataprovider是ArrayCollection,
而且每个item还是[Bindable],这样属性的改变会通知view,让view刷新

改成下面这样,就发现无论如何都不能更新了,因为普通object不是Bindable的

                        [Bindable]
			public var productAC:ArrayCollection=new ArrayCollection(
				[{name:"product1",price:43},
					{name:"product2",price:35},
					{name:"product3",price:108}
				]);
			
			private function change():void{
				var p:Object =productAC.getItemAt(1) as Object;
				p.price=855;
			}


为了通知datagrid更新view,mx的datagrid的常用方法是invalidateList方法.
到了spark的datagrid,发现没有invalidateList方法了,这时可以在dataprovider上调用refresh方法
private function change():void{
				var p:Object =productAC.getItemAt(1) as Object;
				p.price=855;
				
				mxDG.invalidateList();
				productAC.refresh();
}
5
0
分享到:
评论

相关推荐

    flex-datagrid-advancedDataGrid-demo

    本示例"flex-datagrid-advancedDataGrid-demo"显然是为了演示如何在Flex应用中有效地使用这两种数据网格控件。 首先,DataGrid是最基础的数据展示组件,它允许开发者以表格的形式展示数据,支持排序、选择和编辑等...

    Datagrid-filter插件

    `Datagrid-filter`插件正是针对这种需求设计的,它是一个高效且实用的Grid插件,旨在提升数据网格的可操作性和用户交互性。这个插件的核心功能是为每一列提供过滤条件,使得用户能够快速筛选出所需的信息,极大地...

    datagrid-dnd(可以拖放的datagrid)

    在本例中,我们关注的是一个名为"datagrid-dnd"的特性,这是一项允许用户通过拖放操作来重新排列数据网格行的功能。这个特性增强了用户交互性和数据管理的便利性,尤其适用于那些需要频繁调整数据顺序的场景。 首先...

    jeasyui-datagrid-datagrid2.zip

    jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip

    jeasyui-datagrid-datagrid

    《JeasyUI DataGrid深度解析与开发指南》 在Web应用开发中,数据展示和交互是核心部分之一,而DataGrid作为数据展示的利器,深受开发者喜爱。JeasyUI DataGrid是一款基于jQuery的轻量级组件,它为开发者提供了丰富...

    datagrid-cellediting.js

    datagrid-cellediting.js

    datagrid-export.js

    该文件是用来将easyui-datagrid按照格式导出到excel中,可以将合并的单元格,复杂的表头,背景色及字色等按照显示的样式导出到excel,即所见即所得

    datagrid-groupview.js

    在给定的标题"datagrid-groupview.js"中,我们可以看出这是一个针对jQuery EasyUI Datagrid组件的扩展,用于实现表格数据的分组显示功能。现在,我们将深入探讨这个知识点。 首先,jQuery EasyUI的Datagrid组件是一...

    datagrid-filter

    datagrid-filter 是一个与数据展示相关的前端组件,常用于表格数据的筛选和过滤。在这个特定的场景中,用户遇到了一个问题:当尝试向datagrid-filter插入数据时,组件会错误地显示两个相同的条目。这个问题可能是...

    easyui-datagrid2-demo.zip

    "easyui-datagrid2-demo.zip" 文件包含了使用 EasyUI Datagrid 的一个示例,帮助开发者了解如何实现数据的加载、分页、排序等基本操作。 在这个 demo 中,我们可以从以下几个方面学习 EasyUI Datagrid 的使用: 1....

    datagrid-export.zip

    这个“datagrid-export.zip”文件提供了一种解决方案,使得开发者能够将EasyUI-datagrid中的数据按照其在界面上的样式,包括合并的单元格、复杂的表头、背景色和文字颜色等,方便地导出到Excel中,实现“所见即所得...

    Flex-DataGrid源码及资料

    Flex DataGrid是一款在Adobe Flex开发环境中广泛使用的组件,主要用于展示和操作大量结构化的数据。它是一种灵活的表格视图,可以轻松地实现数据的排序、筛选、分页等功能。在这个"Flex-DataGrid源码及资料"的压缩包...

    跟我StepByStep学FLEX教程------王一松

    ### FLEX教程知识点详解 #### 1. FLEX概述 - **FLEX介绍**:FLEX是一种用于构建跨平台富互联网应用程序(RIA)的技术。它使用了一种名为MXML的标记语言来创建用户界面,并利用ActionScript进行逻辑处理。FLEX能够...

    easyui datagrid插件 datagrid-detailview.js

    支持datagrid扩展,在一条记录下面可以嵌套一个子datagrid,切记要在页面中引入该js

    flex datagrid 前台 分页

    Flex DataGrid是一款强大的数据展示组件,常用于Adobe Flex或Flash Builder等开发环境中。它能够高效地展示大量数据,并提供丰富的用户交互功能。在本场景中,我们关注的是“前台分页”这一技术。 前台分页是指在...

    datagrid-detailview.js datagrid-bufferview.js datagrid-groupview.js

    `datagrid-detailview.js`文件包含了实现这一功能的代码。使用DetailView,可以提高用户体验,让用户无需离开当前页面就能查看和操作详细信息。 2. **BufferView**: BufferView是一种优化大量数据加载的技术。在...

    FLEX的datagrid合计、平均值

    在Flex开发中,Datagrid组件是用于展示数据集的一个强大工具,它允许用户以表格的形式查看和操作数据。本文将深入探讨如何在Flex的Datagrid中实现数据的合计与平均值计算,帮助开发者更好地理解和应用这些功能。 ...

Global site tag (gtag.js) - Google Analytics