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

state語(yǔ)法的改變 state語(yǔ)法變了，變得更加的有彈性和直接。你甚至可以根據(jù)上下文來(lái)針對(duì)性的改變你的狀態(tài)。下面是重點(diǎn)： 1，只有狀態(tài)被定義到了狀態(tài)數(shù)組。 2，AddChild和RemoveChild，不能再用了。取而代之的是includeIn和excludeFrme屬性 。這兩個(gè)屬性是組件的屬性。 看例子吧！ 這是flex3應(yīng)用狀態(tài)的方式。 <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被點(diǎn)語(yǔ)法取代了。 下面是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,組件不能在無(wú)狀態(tài)或空的狀態(tài)。它默認(rèn)的狀態(tài)時(shí)第一個(gè)聲明的狀態(tài)。

Flex 3.x到Flex 4.5 容器與布局組件容器（Container）在說(shuō)布局之前，我們先說(shuō)說(shuō)Flex4中得容器的變化。Flex4中提供了一些新的容器，并且不在推薦使用Flex3中的容器了。Group (包括HGroup、VGroup、TileGroup) 與DataGroup SkinnableContainer、SkinnableDataContainer、Panel、TitleWindow、NavigatorContent、BorderContainer, 和Application（Panel、TitleWindow、NavigatorContent以及BorderContainer都是SkinnableContainer的子類(lèi)）當(dāng)然Spark容器都具有以下特點(diǎn)：可變的布局：除了部分已經(jīng)自定義布局的容器（如HGroup、VGroup、TileGroup）的布局不能改變，其他的Spark容易都可以改變其布局，在本節(jié)后面做詳細(xì)介紹Spark布局； 皮膚：我們知道Spark容器的皮膚和Flex3中的皮膚已經(jīng)有很大的不同了，大部分的Spark容器都支持皮膚，當(dāng)然這些容器得繼承SkinnableContainer或者SkinnableDataContainer；但是為了提高性能及減小應(yīng)用的大小，不是所有的容器都支持皮膚，如果容器沒(méi)有繼承自這兩個(gè)Skinable類(lèi)之一，那么他就不支持皮膚，如Group、DataGroup； 添加的子控件(Element/Child)：DisplayObject、UIcomponent、Container、IVisualElement、IGraphicElement、IVisualElementContainer、ISharedDisplayObject。這幾個(gè)類(lèi)型，有些是在Spark中引入的新的類(lèi)型，在后面我將詳細(xì)的說(shuō)一說(shuō)他們的作用以及之間的關(guān)系，包括和Flex3 Halo之間的聯(lián)系等。【傳送門(mén)待添加】下面列出一些Flex官方推薦的與Flex3的容器的映射關(guān)系，但是我們用的時(shí)候卻不一定需要按照這個(gè)來(lái)：Flex 3 Flex 4 (Spark)官方建議 實(shí)際應(yīng)用備選建議 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，是不是感到困惑呢？從前面的一段話(huà)中可以看出，Group是沒(méi)有Skin的，BorderContainer是有Skin的，所以在使用的時(shí)候可以根據(jù)自己的需求，由于Layout已經(jīng)可以自己設(shè)定，那么只需要看是否使用Skin，就可以決定究竟是使用BorderContainer還是Group。另外還有很多具體的變化，從Flex3剛轉(zhuǎn)到Flex4，可能知道上面的對(duì)應(yīng)關(guān)系還不夠，還有很多細(xì)節(jié)，如clipping、scrollbar等問(wèn)題，我會(huì)在講解Skin的一篇說(shuō)說(shuō)clipping、scrollable以及如何給自定義Container。布局（Layout）Flex4/Spark組件架構(gòu)的新功能之一是可以定制一個(gè)容器的布局而不必改變?nèi)萜鞅旧?#xff0c;正如前面提到的“可變的布局”，默認(rèn)的有BasicLayout、HorizontalLayout、TileLayout、VerticalLayout四大布局方式。基本布局BasicLayout：這是spark組件默認(rèn)的布局方式，即絕對(duì)定位布局。在FlexSDK3里面對(duì)應(yīng)的是：layout=”absolute”；類(lèi)似Flex3中的Canvas的布局； HorizontalLayout：這是spark組件庫(kù)里面的水平布局方式。在里面對(duì)應(yīng)的是：layout=”horizontal”；對(duì)應(yīng)Flex3中得HBox的布局方式； VerticalLayout：這是spark組件庫(kù)里面的豎直布局方式。在FlexSDK3里面對(duì)應(yīng)的是：layout=”vertical”；對(duì)應(yīng)Flex3中得VBox的布局； TileLayout：這是spark組件庫(kù)新增的布局方式，即格子布局方式。TileLayout布局方式可以說(shuō)是HorizontalLayout和VerticalLayout結(jié)合的方式；當(dāng)然可以看出這就是Flex3中得Tile組件的布局方式。布局使用方法我們?nèi)匀环謩e使用MXML和ActionScript兩種方式來(lái)舉例說(shuō)明。首先來(lái)說(shuō)最常用的方式，也就是MXML的方式：<s:Group><s:layout> <s:HorizontalLayout /> </s:layout></s:Group>例子中用的是HorizontalLayout，當(dāng)然，你可以使用其他的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>當(dāng)然，在上面的代碼中除了設(shè)置layout，還設(shè)置了layoutDirection，這是在4.1中加入的屬性，用來(lái)指定布局方式是從左往右（ltr）還是從右向左（rtl），也可以像注視中的AS代碼那樣設(shè)置。Layout的屬性設(shè)置另外，Flex3中，我們可以在Container上設(shè)置設(shè)置的與布局相關(guān)的屬性現(xiàn)在都移到了layout上，比如verticalAlign、horizontalAlign、gap以及各個(gè)方向的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>對(duì)于這些屬性基本與Flex3中得相同，只是現(xiàn)在是針對(duì)layout設(shè)置了。另外layout還有一些在Flex中沒(méi)有見(jiàn)過(guò)的屬性，我們特別說(shuō)下面兩個(gè)：clipAndEnableScrolling、useVirtualLayout，他們的設(shè)置方法和gap、padding之類(lèi)的屬性一樣設(shè)置：clipAndEnableScrolling: 如果是true，則將超出范圍的children裁掉不顯示出來(lái)，如Flex3中得Canvas等，如果顯示的范圍超出了Canvas的范圍，則不會(huì)顯示；如果是false，則不管他的children是否超出他的范圍，都會(huì)完全顯示出來(lái)（但不會(huì)超出Application的范圍）。 Flex4中有兩個(gè)地方可以設(shè)置這個(gè)屬性，一個(gè)是Skin中（該屬性是定義在GroupBase中的property，而Skin繼承GroupBase），一個(gè)是Layout中，而默認(rèn)情況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中設(shè)置才是合情理的。useVirtualLayout：顧名思義是虛擬布局，那么虛擬布局是什么概念呢？我想我還是從它的用途說(shuō)起吧。如果你熟悉Flex3中List的ItemRenderer的渲染機(jī)制，那么我們就當(dāng)作Flex3中的List就是useVirtualLayout的效果。啥意思呢？當(dāng)開(kāi)啟useVirtualLayout（設(shè)為true）之后，并不是所有的children都會(huì)被渲染，而是只有當(dāng)前能夠顯示出來(lái)的child才會(huì)被渲染（比如List只顯示一些itemRenderer，其他的通過(guò)Scrollbar控制）。顯然，這樣我們可以大幅度的提高效率。

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

轉(zhuǎn)載于:https://blog.51cto.com/4545079/1308442

總結(jié)

以上是生活随笔為你收集整理的flex 3与flex 4的不同的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。