Flex4.5中DataGrid組件的使用有關Flex的DataGrid文章的確不少，都是零零碎碎的，目前還沒有發現有個完整的例子供網友參考，這次我花了兩天時間做了下Flex關于DataGrid一個指標數據管理系統，當然設計到的mxml會很多，大都是與DataGrid相關，我就抽取最常用的DataGrid的增刪改同步數據庫及頁面數據來講解首先整理下思路，首先無論是刪除還是修改，必須得獲取當前行所在的記錄，那么可以設置個全局變量，當DataGrid的itemClick事件出發時將選中的行賦給全局變量[Bindable]public var acItemsSelected:Object;;//事件方法protected function myGrid_itemClickHandler(event:ListEvent):void{acItemsSelected = myGrid.selectedItem; }這樣的話就可以獲得了當前選中的對象了如果刪除和修改的話，通常傳到后臺的肯定含有對象的ID項，那么這個ID是怎么獲取的呢，通過acItemsSelected.xxxId能獲取，那么這個xxxId必須是在DataGrid中有，設置為不顯示就好了，例如我就是這么做的<mx:DataGridColumn visible="false" dataField="targetCalId" />這樣的話，要更改的數據等都能通過ID傳到后臺查詢相應對象更改刪除了，接下來的事是比較重要的，如果光刪除數據庫是不行的，頁面數據也要保持同步，關于dataGrid也沒有好的刷新方法，所以你上網一搜，可能有的人會告訴你對于刪除這樣做：dataArray.removeItemAt(myGrid.selectedIndex);增加這樣做：dataArray.addItemAt(obj,0);修改這樣做：dataArray.setItemAt(obj,myGrid.selectedIndex);這里說的dataArray是指的是DataGrid的DataProvider的值集合【當然肯定得聲明稱全局變量】這樣的寫法呢可能你覺得，哎，是對的，其實不然，這并沒有真正起到作用，對于FLEX來說緩存是相當大的，不行的話你通過這個修改行記錄的屬性后，再點這行記錄的屬性編輯頁面發現值根本沒改，所以所沒有進行二次查詢數據庫了，利用的是緩存。即便是你調用了初始化查詢數據庫的那個方法，也是不行的，還是有緩存，最好的做法就是，拋棄上面的三種寫法，只需要兩步就可以實現刷新，第一初始化DataGrid的那個方法請求必須是URLRequest的，添加一個參數類似于var u:URLVariables=new URLVariables("temp="+Math.random());當然不一定非要是temp什么名字都行，然后在返回操作成功提示后調用這個初始化方法，你會發現真的起作用了。其實建議關于URLRequest傳參數的最好帶上這個參數，也不費事，可以在很多場合下解決緩存不更新問題

state語法的改變 state語法變了，變得更加的有彈性和直接。你甚至可以根據上下文來針對性的改變你的狀態。下面是重點： 1，只有狀態被定義到了狀態數組。 2，AddChild和RemoveChild，不能再用了。取而代之的是includeIn和excludeFrme屬性 。這兩個屬性是組件的屬性。 看例子吧！ 這是flex3應用狀態的方式。 <mx:states><mx:State name="submitState" basedOn=""> <mx:AddChild relativeTo="{loginForm}" > <mx:Button label="submit" bottom="10" right="10"/> </mx:AddChild> <mx:RemoveChild target="{firstTextInput}"/> </mx:State> </mx:states> <mx:TextInput id="firstTextInput" /> <mx:Canvas id="loginForm" /> 這是flex4 <s:states> <s:State name="submitState" /> </s:states> <s:TextInput id="firstTextInput" excludeFrom="submitState" /> <s:Group id="loginForm" > <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/> </s:Group> 3,setProperty,setStyle和setEvent被點語法取代了。 下面是flex3的做法 <mx:states> <mx:State name="submitState" basedOn=""> <mx:SetProperty target="{submitButton}" name="label" value="submit" /> <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/> <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/> </mx:State> <mx:State name="clearState" basedOn=""> <mx:SetProperty target="{submitButton}" name="label" value="clear" /> <mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" /> </mx:State> </mx:states> <mx:Button id="submitButton" /> 下面是flex4的做法 <s:states> <s:State name="submitState" /> <s:State name="clearState" /> </s:states> <s:Button label.submitState="submit" textDecoration.submitState="underline" click.submitState="trace('done')" click.clearState="emptyDocument()" label.clearState="clear" textDecoration.clearState="none"/> 4,組件不能在無狀態或空的狀態。它默認的狀態時第一個聲明的狀態。

Flex 3.x到Flex 4.5 容器與布局組件容器（Container）在說布局之前，我們先說說Flex4中得容器的變化。Flex4中提供了一些新的容器，并且不在推薦使用Flex3中的容器了。Group (包括HGroup、VGroup、TileGroup) 與DataGroup SkinnableContainer、SkinnableDataContainer、Panel、TitleWindow、NavigatorContent、BorderContainer, 和Application（Panel、TitleWindow、NavigatorContent以及BorderContainer都是SkinnableContainer的子類）當然Spark容器都具有以下特點：可變的布局：除了部分已經自定義布局的容器（如HGroup、VGroup、TileGroup）的布局不能改變，其他的Spark容易都可以改變其布局，在本節后面做詳細介紹Spark布局； 皮膚：我們知道Spark容器的皮膚和Flex3中的皮膚已經有很大的不同了，大部分的Spark容器都支持皮膚，當然這些容器得繼承SkinnableContainer或者SkinnableDataContainer；但是為了提高性能及減小應用的大小，不是所有的容器都支持皮膚，如果容器沒有繼承自這兩個Skinable類之一，那么他就不支持皮膚，如Group、DataGroup； 添加的子控件(Element/Child)：DisplayObject、UIcomponent、Container、IVisualElement、IGraphicElement、IVisualElementContainer、ISharedDisplayObject。這幾個類型，有些是在Spark中引入的新的類型，在后面我將詳細的說一說他們的作用以及之間的關系，包括和Flex3 Halo之間的聯系等。【傳送門待添加】下面列出一些Flex官方推薦的與Flex3的容器的映射關系，但是我們用的時候卻不一定需要按照這個來：Flex 3 Flex 4 (Spark)官方建議 實際應用備選建議 mx.containers.Canvas spark.components.BorderContainer spark.components.Group mx.containers.Box spark.components.BorderContainer spark.components.Group mx.containers.HBox spark.components.BorderContainer spark.components.HGroup mx.containers.VBox spark.components.BorderContainer spark.components.VGroup mx.containers.Panel spark.components.Panel spark.components.Panel mx.containers.Tile spark.components.BorderContainer spark.components.Group(使用TileLayout) mx.containers.TitleWindow spark.components.TitleWindow spark.components.TitleWindow mx.containers.Form spark.components.Form spark.components.Form 上面的表格中有很多地方都可以用BorderContainer或者是Group，是不是感到困惑呢？從前面的一段話中可以看出，Group是沒有Skin的，BorderContainer是有Skin的，所以在使用的時候可以根據自己的需求，由于Layout已經可以自己設定，那么只需要看是否使用Skin，就可以決定究竟是使用BorderContainer還是Group。另外還有很多具體的變化，從Flex3剛轉到Flex4，可能知道上面的對應關系還不夠，還有很多細節，如clipping、scrollbar等問題，我會在講解Skin的一篇說說clipping、scrollable以及如何給自定義Container。布局（Layout）Flex4/Spark組件架構的新功能之一是可以定制一個容器的布局而不必改變容器本身，正如前面提到的“可變的布局”，默認的有BasicLayout、HorizontalLayout、TileLayout、VerticalLayout四大布局方式。基本布局BasicLayout：這是spark組件默認的布局方式，即絕對定位布局。在FlexSDK3里面對應的是：layout=”absolute”；類似Flex3中的Canvas的布局； HorizontalLayout：這是spark組件庫里面的水平布局方式。在里面對應的是：layout=”horizontal”；對應Flex3中得HBox的布局方式； VerticalLayout：這是spark組件庫里面的豎直布局方式。在FlexSDK3里面對應的是：layout=”vertical”；對應Flex3中得VBox的布局； TileLayout：這是spark組件庫新增的布局方式，即格子布局方式。TileLayout布局方式可以說是HorizontalLayout和VerticalLayout結合的方式；當然可以看出這就是Flex3中得Tile組件的布局方式。布局使用方法我們仍然分別使用MXML和ActionScript兩種方式來舉例說明。首先來說最常用的方式，也就是MXML的方式：<s:Group><s:layout> <s:HorizontalLayout /> </s:layout></s:Group>例子中用的是HorizontalLayout，當然，你可以使用其他的Layout。<fx:Script><![CDATA[ import mx.core.LayoutDirection; import mx.events.FlexEvent; import spark.layouts.HorizontalLayout; protected function creationCompleteHandler(event:FlexEvent):void { group.layout = new HorizontalLayout; //group.layoutDirection = LayoutDirection.LTR; } ]]> </fx:Script> <s:Group layoutDirection="rtl"> <s:Button label="A" /> <s:Button label="B" /> </s:Group>當然，在上面的代碼中除了設置layout，還設置了layoutDirection，這是在4.1中加入的屬性，用來指定布局方式是從左往右（ltr）還是從右向左（rtl），也可以像注視中的AS代碼那樣設置。Layout的屬性設置另外，Flex3中，我們可以在Container上設置設置的與布局相關的屬性現在都移到了layout上，比如verticalAlign、horizontalAlign、gap以及各個方向的padding值：<s:Group layoutDirection="rtl"> <s:layout> <s:HorizontalLayout verticalAlign="baseline" horizontalAlign="left" gap="5" paddingBottom="1" paddingLeft="1" paddingRight="1" paddingTop="1" /> </s:layout> <s:Button label="A" /> <s:Button label="B" /> </s:Group>對于這些屬性基本與Flex3中得相同，只是現在是針對layout設置了。另外layout還有一些在Flex中沒有見過的屬性，我們特別說下面兩個：clipAndEnableScrolling、useVirtualLayout，他們的設置方法和gap、padding之類的屬性一樣設置：clipAndEnableScrolling: 如果是true，則將超出范圍的children裁掉不顯示出來，如Flex3中得Canvas等，如果顯示的范圍超出了Canvas的范圍，則不會顯示；如果是false，則不管他的children是否超出他的范圍，都會完全顯示出來（但不會超出Application的范圍）。 Flex4中有兩個地方可以設置這個屬性，一個是Skin中（該屬性是定義在GroupBase中的property，而Skin繼承GroupBase），一個是Layout中，而默認情況GroupBase中的property也是由Layout中取出，如下貼出SDK中GroupBase.get clipAndEnableScrolling的代碼：public function get clipAndEnableScrolling():Boolean { if (_layout) { return _layout.clipAndEnableScrolling; } else if (_layoutProperties && _layoutProperties.clipAndEnableScrolling !== undefined) { return _layoutProperties.clipAndEnableScrolling; } else{ return false; } }由此我們可以看出，該屬性在layout中設置才是合情理的。useVirtualLayout：顧名思義是虛擬布局，那么虛擬布局是什么概念呢？我想我還是從它的用途說起吧。如果你熟悉Flex3中List的ItemRenderer的渲染機制，那么我們就當作Flex3中的List就是useVirtualLayout的效果。啥意思呢？當開啟useVirtualLayout（設為true）之后，并不是所有的children都會被渲染，而是只有當前能夠顯示出來的child才會被渲染（比如List只顯示一些itemRenderer，其他的通過Scrollbar控制）。顯然，這樣我們可以大幅度的提高效率。

Flex4.5中DataGrid組件的使用有關Flex的DataGrid文章的確不少，都是零零碎碎的，目前還沒有發現有個完整的例子供網友參考，這次我花了兩天時間做了下Flex關于DataGrid一個指標數據管理系統，當然設計到的mxml會很多，大都是與DataGrid相關，我就抽取最常用的DataGrid的增刪改同步數據庫及頁面數據來講解首先整理下思路，首先無論是刪除還是修改，必須得獲取當前行所在的記錄，那么可以設置個全局變量，當DataGrid的itemClick事件出發時將選中的行賦給全局變量[Bindable]public var acItemsSelected:Object;;//事件方法protected function myGrid_itemClickHandler(event:ListEvent):void{acItemsSelected = myGrid.selectedItem; }這樣的話就可以獲得了當前選中的對象了如果刪除和修改的話，通常傳到后臺的肯定含有對象的ID項，那么這個ID是怎么獲取的呢，通過acItemsSelected.xxxId能獲取，那么這個xxxId必須是在DataGrid中有，設置為不顯示就好了，例如我就是這么做的<mx:DataGridColumn visible="false" dataField="targetCalId" />這樣的話，要更改的數據等都能通過ID傳到后臺查詢相應對象更改刪除了，接下來的事是比較重要的，如果光刪除數據庫是不行的，頁面數據也要保持同步，關于dataGrid也沒有好的刷新方法，所以你上網一搜，可能有的人會告訴你對于刪除這樣做：dataArray.removeItemAt(myGrid.selectedIndex);增加這樣做：dataArray.addItemAt(obj,0);修改這樣做：dataArray.setItemAt(obj,myGrid.selectedIndex);這里說的dataArray是指的是DataGrid的DataProvider的值集合【當然肯定得聲明稱全局變量】這樣的寫法呢可能你覺得，哎，是對的，其實不然，這并沒有真正起到作用，對于FLEX來說緩存是相當大的，不行的話你通過這個修改行記錄的屬性后，再點這行記錄的屬性編輯頁面發現值根本沒改，所以所沒有進行二次查詢數據庫了，利用的是緩存。即便是你調用了初始化查詢數據庫的那個方法，也是不行的，還是有緩存，最好的做法就是，拋棄上面的三種寫法，只需要兩步就可以實現刷新，第一初始化DataGrid的那個方法請求必須是URLRequest的，添加一個參數類似于var u:URLVariables=new URLVariables("temp="+Math.random());當然不一定非要是temp什么名字都行，然后在返回操作成功提示后調用這個初始化方法，你會發現真的起作用了。其實建議關于URLRequest傳參數的最好帶上這個參數，也不費事，可以在很多場合下解決緩存不更新問題

轉載于:https://blog.51cto.com/4545079/1308442

總結

以上是生活随笔為你收集整理的flex 3与flex 4的不同的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。