itemrenderer－這種 itemrenderer 的 mxml 標記和 actionscript **與使用該 itemrenderer 的列表位於同一檔案中。**與檔案中的其餘**內聯。
將 itemrenderer 提取到乙個外部檔案有幾個優勢:
itemrenderer 可輕鬆用於多個列表中
**更容易維護
可以使用 flex builder 的「設計」檢視草擬出最初的 itemrenderer
mxml itemrenderer
在第 1 部分中, 您看到有乙個複雜的 itemrenderer 用於 datagrid:
today ) setstyle("backgroundcolor",0xff99ff);
else setstyle("backgroundcolor",0xffffff);
}]]>
itemrenderer 基於 hbox, 包含乙個 image 和乙個 text, 並且根據專案記錄的 pubdate 字段設定背景色。可以使用以下步驟將同一 itemrenderer 編寫為乙個外部檔案:
如果您使用 flex builder, 請新建乙個 mxml component 檔案 (我將我的檔案命名為 gridcolumn******renderer, 您可以隨意命名), 將根標記設定為 hbox。不必擔心大小。
如果您只使用 sdk, 請新建乙個 mxml 檔案 (將它命名為 gridcolumn******renderer.mxml), 將根標記設定為 hbox。
在檔案開啟時, 複製 與 之間的所有內容, 但不要複製那些標記, 因為檔案中已有它們。結果應該如下:
<?xml version="1.0" encoding="utf-8"?>
today ) setstyle("backgroundcolor",0xff99ff);
else setstyle("backgroundcolor",0xffffff); }
]]>
儲存此檔案。
現在修改 datagridcolumn 定義, 方法是刪除內聯 itemrenderer 並將它替換為以下內容:
現在執行這個應用程式。您會大吃一驚。因為行很高。這是因為 itemrenderer 上的 height="300"。
決定 itemrenderer 的寬度和高度
list 控制始終設定 itemrenderer 的寬度。本例中將忽略明確的 width="400"。您應當編寫自己的 itemrenderer, 假設使用者更改列或列表寬度是寬度會更改。
高度則是另一回事。如果列表設定了明確的 rowheight, 它會將這個高度強加到各行, 忽略您對 itemrenderer 設定的任何高度。但是, 如果您將列表的 variablerowheight 屬性設定為 true, 則列表會慎重考慮 itemrenderer 的高度。在本例中, 高度明確設定為 300, 所以各行為 300 畫素高。
要修復它, 請從 itemrenderer 檔案中刪除明確高度, 應用程式即可正確執行。
動態更改 itemrenderer
本例覆蓋了 set data() 函式以檢查資料並設定 itemrenderer 的 backgroundcolor。這十分常見。覆蓋 set data() 使您能擷取為新行更改資料的時間, 並且您可以作出樣式更改。
常見錯誤為:
您將把它轉變為乙個 actionscript 外部 itemrenderer。您需要執行以下步驟:
新建乙個 actionscript 類。將它命名為 booktilerenderer.as 並使它擴充套件 hbox, 就像內聯 itemrenderer 那樣。
package
} }
建立成員變數, 用於存放子元件的引用。
private var coverimage:image;
private var titletext:text;
private var spacer1:spacer;
private var authorlabel:label;
private var pubdatelabel:label;
private var spacer2:spacer;
private var buybutton:button;
覆蓋 createchildren() 函式以建立子元件, 並將它們新增到 hbox。
override protected function createchildren():void
我準備通過這一**顯示父子關係。同時, 確保在 buy 按鈕中包含乙個事件偵聽器。
覆蓋 commitproperties() 函式, 並從資料設定使用者介面控制。
override protected function commitproperties():void
為 buy 按鈕新增單擊事件處理函式。
private function handlebuyclick( event:mouseevent ) : void
將主應用程式中的 tilelist 修改為使用 itemrenderer actionscript 類。只需刪除 inlineitemrenderer 並將它替換為標記中的 itemrenderer 屬性。
如果要使用乙個現有容器類, 如 hbox, 我不會使用 actionscript 這樣做。您會發現它比使用 mxml 檔案複雜, 並且老實說, 效能方面幾乎沒有任何優勢。
可重用的 itemrenderer
以下是乙個 itemrenderer 示例, 它使用 currencyformatter 顯示乙個數值。我稱之為 priceformatter:
<?xml version="1.0" encoding="utf-8"?>
}]]>
這個 itemrenderer 的關鍵部分以紅色標出, 設定可繫結變數 formattedvalue。首先, 您會發現 使用 id cfmt 定義為 mxml 標記 (如果您願意, 也可以使用 actionscript 這樣做)。在上例中, formattedvalue 設定為 currentformatter 的 format() 函式的呼叫結果。
此函式將 number 作為其引數型別, 所以值被轉換為 number－這是因為列表的 dataprovider 是 xml 並且 xml 中的所有內容是文字; 如果為資料使用 object 並且您有實際數值, 執行 number 轉變將是無害的。
如您所知, 資料是存放 itemrenderer 所顯示專案的屬性。使用 [ ] 記號是訪問資料專案欄位的另一種方法。例如, data['price'] 是**列。但是為了使這個 itemrenderer 可重用, 您不能為特定字段編碼, 所以需要一種更普通的方法。
此時, listdata 登台亮相。實施 idropinlistitemrenderer 介面的所有 flex 元件都有乙個 listdata 屬性。
除了其他內容, 提供給 itemrenderer 的 listdata 還包含 rowindex 和控制, 該控制擁有 itemrenderer－datagrid、list 或 tilelist。將 itemrenderer 用於 datagrid 時, listdata 實際上是乙個 datagridlistdata 物件－它包含 columnindex 以及與 datagridcolumn 關聯的 datafield。以下是上述語句的明細, 從內部開始:
外部渲染器上
您應該還記得我說過,應該將內聯 itemrenderer 視作單獨的類。事實上,flex 編譯器提取這些內聯 並為您建立類。內聯 itemrenderer 的優勢在於 與列表位於同一位置,但是如果 itemrenderer 變得複雜時,這又變成了劣勢。本文中我將向您展示如何自己建立類。將 itemr...
Flex 內聯渲染器（上）
flex 提供許多控制,它們可以按不同方式顯示大量資料。list 控制自己 datagrid tree 以及包括圖表和 advanceddatagrid 在內的可視類。預設情況下,flex 列表控制將提供的資料顯示為簡單文字。但 flex 的能耐遠不止此,列表控制提供了一種使用 itemrender...
Flex中使用渲染器 ItemRenderer
flex中的渲染器 itemrenderer 使用非常頻繁，可以讓使用者自行定義資料的顯示格式，做過.net開發的朋友我想都知道資料控制項中的itemtemplate，我個人認為flex中的itemrenderer和.net中的itemtemplate從功能上來說相差不大，在flex要顯示特定的格式...