Flexのちょっとした入門経験(9)--datagridの強制更新

2780 ワード

例えば次のような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;
	}

次のファイルでは、このvoのセットをmxのdatagridとsparkのdatagridでそれぞれ表示します.

<?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();
}