Flex中如何动态的载入XML并显示在DataGrid中的例子

By Minidxer | June 3, 2009

接下来的例子演示了Flex中如何动态的载入XML并显示在DataGrid。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="DataGrid_XML_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         xmlns:net="flash.net.*"
  5.         layout="vertical"
  6.         verticalAlign="middle"
  7.         backgroundColor="white">
  8.  
  9.     <mx:Script>
  10.         <![CDATA[
  11.             import mx.events.ListEvent;
  12.             import mx.controls.dataGridClasses.DataGridColumn;
  13.  
  14.             public namespace sitemapNS = "http://www.google.com/schemas/sitemap/0.84";
  15.  
  16.             private function loadXML(targetURL:String):void {
  17.                 urlLdr.load(new URLRequest(targetURL));
  18.                 loadBtn.enabled = false;
  19.             }
  20.  
  21.             private function urlLdr_complete(evt:Event):void {
  22.                 var xmlData:XML = new XML(URLLoader(evt.currentTarget).data);
  23.                 xmlListColl = new XMLListCollection(xmlData.children());
  24.                 dataGrid.enabled = true;
  25.                 loadBtn.enabled = true;
  26.             }
  27.  
  28.             private function dataGrid_labelFunc(item:XML, col:DataGridColumn):String {
  29.                 var qN:QName = new QName(sitemapNS, col.dataField);
  30.                 return item[qN].text();
  31.             }
  32.  
  33.             private function dataGrid_dateLabelFunc(item:XML, col:DataGridColumn):String {
  34.                 var qN:QName = new QName(sitemapNS, col.dataField);
  35.                 var value:String = item[qN].text();
  36.                 value = value.replace(/-/g, "/");
  37.                 value = value.replace("T", " ");
  38.                 value = value.replace("+00:00", "");
  39.                 return value;
  40.             }
  41.  
  42.             private function dataGrid_itemDoubleClick(evt:ListEvent):void {
  43.                 use namespace sitemapNS;
  44.                 var url:String = evt.itemRenderer.data.loc;
  45.                 navigateToURL(new URLRequest(url), "_blank");
  46.             }
  47.         ]]>
  48.     </mx:Script>
  49.  
  50.     <net:URLLoader id="urlLdr"
  51.             complete="urlLdr_complete(event);" />
  52.     <mx:XMLListCollection id="xmlListColl" />
  53.  
  54.     <mx:ApplicationControlBar dock="true">
  55.         <mx:Button id="loadBtn"
  56.                 label="Load XML"
  57.                 click="loadXML('http://blog.flexexamples.com/sitemap.xml');" />
  58.         <mx:Spacer width="100%" />
  59.         <mx:ProgressBar id="progressBar"
  60.                 mode="event"
  61.                 source="{urlLdr}"
  62.                 labelPlacement="center" />
  63.     </mx:ApplicationControlBar>
  64.  
  65.     <mx:DataGrid id="dataGrid"
  66.             dataProvider="{xmlListColl}"
  67.             doubleClickEnabled="true"
  68.             itemDoubleClick="dataGrid_itemDoubleClick(event);"
  69.             enabled="false"
  70.             width="100%"
  71.             height="100%">
  72.         <mx:columns>
  73.             <mx:DataGridColumn dataField="loc"
  74.                     labelFunction="dataGrid_labelFunc"
  75.                     itemRenderer="mx.controls.Label" />
  76.             <mx:DataGridColumn dataField="lastmod"
  77.                     labelFunction="dataGrid_dateLabelFunc"
  78.                     width="150" />
  79.             <mx:DataGridColumn dataField="changefreq"
  80.                     labelFunction="dataGrid_labelFunc"
  81.                     width="100" />
  82.             <mx:DataGridColumn dataField="priority"
  83.                     labelFunction="dataGrid_labelFunc"
  84.                     width="100" />
  85.         </mx:columns>
  86.     </mx:DataGrid>
  87.  
  88. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DataGrid | 1 Comment » | Tags: , , , , ,

你可能还对下列文章感兴趣:

One comment | Add One

  1. Minidxer - 06/3/2009 at 3:58 pm

    本例由于调用了http://blog.flexexamples.com/sitemap.xml 的xml文件，载入比较困难，大家可以在本地尝试一下。

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll