Ext 的 XmlReader 測試

測試環境:
1. Windows XP Pro + SP2
2. IE 6.0
3. Javascript Library 
    3.1 Ext 1.0a 
    3.2 Prototype 1.5.0

Ext 1.0 提供了 XmlReader 物件,可將 XML Document 轉換成 Array,下面是一個簡單的測試範例,因為使用了 IE 專屬的 XMLDOM 所以此範例無法運作於 Firefox 中。如果 XML 是放在遠端機器上,可搭配 HttpProxy 物件使用,如此可同時用於 IE 和 Firefox。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> new document </title>
 <meta http-equiv="Content-Type" content="text/html; charset=big5"/>
 <meta name="author" content="Chui-Wen Chiu">
 <script type="text/javascript" src="../prototype.js"></script>
    <script type="text/javascript" src="../../yui-utilities.js"></script>     <script type="text/javascript" src="../../ext-yui-adapter.js"></script>     <!-- ENDLIBS -->
    <script type="text/javascript" src="../../ext-all-debug.js"></script>
 
<script type = 'text/javascript'>
<!--//
 Ext.onReady(function(){
  // 1. 產生 XmlReader
  // 下面的參數主要的意思是將 XML 中的 <Item> 標籤轉換成陣列
  // 陣列中的每一筆資料代表一筆紀錄,每一筆紀錄使用 <ASIN>xxx</ASIN> 為識別碼
  // 將 <Item> 標籤的數量放置在 totalRecords
  // 每一筆紀錄的欄位分別抓取 <Item> 標籤下的 <Author>, <Title>, <Manufacturer>, <ProductGroup> 等標籤
  var xr = new Ext.data.XmlReader({
       record: 'Item',   // XML 標籤
       id: 'ASIN',    // 紀錄識別碼對應 XML 的標籤
       totalRecords: '@total' // 取得 record 欄位指定標籤(<Item>)的數量,如果未指定該欄位,則 Record 物件的 totalRecords 屬性將直接取用 <item> 標籤數量,一般情況兩個值應該都一樣
      },
     // 要讀取的欄位定義
     [
      {
       name: 'Author',
       mapping: 'ItemAttributes > Author'
      },
      'Title',
      'Manufacturer',
      'ProductGroup'
     ]
      );
  // 2. 產生一個 XML Document
  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  var xmlStr = '/
  <?xml version="1.0" encoding="big5"?>/
    <Items>/
     <Item>/
      <ASIN>0446354732</ASIN>/
      <DetailPageURL>http://www.amazon.com/gp/</DetailPageURL>/
      <ItemAttributes>/
       <Author>中文作者</Author>/
       <Manufacturer>Warner Books</Manufacturer>/
       <ProductGroup>Book</ProductGroup>/
       <Title>Nothing Lasts Forever</Title>/
      </ItemAttributes>/
     </Item>/
    </Items>/
  ';
  xmlDoc.loadXML(xmlStr);

  // 3. 將 XML Document 轉換成 Array
  var rs = xr.readRecords(xmlDoc);

  // 4. 取得資料筆數
  var count = rs.totalRecords;
  $('lblCount').innerText = count;

  var out = '';
  for(var i = 0; i< count; ++i){
   // 5. 取得每一筆紀錄,型態為 Record 物件
   var r = rs.records[i]; 

   // Record 有兩個重要屬性
   // id: Item 的識別碼
   // data: 欄位陣列
   // 上述兩個屬性都依據 XmlReader 建構子的兩個參數所決定
   out += r.id + '=>' + [r.data['Author'], r.data['Title'] , r.data['Manufacturer'] , r.data['ProductGroup'] ].join(',') + '<br/>';
  }
  $('divRecord').innerHTML = out;

 });
//-->
</script>
</head>
<body>
<div>
 <label>Total:</label><label id = 'lblCount' style = 'color: red'></label>
 <div id ='divRecord'>
 </div>
</div>

</body>
</html>

 

你可能感兴趣的:(Ext 的 XmlReader 測試)