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

最新推荐文章于 2016-12-21 12:21:24 发布

最新推荐文章于 2016-12-21 12:21:24 发布 · 191 阅读

文章标签：

#flex

flex 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了Flex中mx和spark DataGrid的数据刷新机制。通过对比Bindable VO与普通对象作为数据提供者的不同表现，介绍了如何使用invalidateList方法和ArrayCollection的refresh方法来实现视图更新。

比如我们有个如下的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();
}