差異處

這裏顯示兩個版本的差異處。

--- java:web:ext:xmlparser [2013/07/11 13:36]
tony
+++ java:web:ext:xmlparser [2023/06/25 09:48] (目前版本)
@@ 行 22: / 行 22: @@
 <code xml>
 <result>
-  <status>success</status>
+  <status>false</status>
-  <msg></msg>
+  <msg>Validation failed.</msg>
 </result>
 </code>
@@ 行 29: / 行 29: @@
 一般正規的原始做法如下: {{:java:web:ext:example_xml_parser.zip|Download Sample}}
 <code javascript>
-var text = "<result><status>success</status><msg>test msg</msg></result>";
+var text = "<result><status>false</status><msg>test msg</msg></result>";
 var xmlDoc = null;
@@ 行 48: / 行 48: @@
 雖然說在ExtJS中取得的response.responseXML已經是DOM Document物件，但要去retrieve DOM Element還是必須根據不同瀏覽器要有不同做法。可以參考這個[[http://www.w3schools.com/dom/dom_document.asp|連結]]中對DOM Document各屬性與方法的瀏覽器支援表。重點是在ExtJS中，有什麼較一致的做法呢?
 ===== How to? =====
+一開始我就想到應該可以用[[http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.reader.Xml|XMLReader]]，但看看sample卻發現要直接取用Element中的資料並不是那麼容易，而且Reader大都與Store搭配。於是我想: 我可以定義一個描述XML的Model，再透過Store去存取它。由於我Server-Side回應Client的格式大都一樣，所以定義對應的model可以讓我之後reuse:
+<code javascript>
+Ext.define('ServerResponseModel', {
+   	extend: 'Ext.data.Model',
+       fields: ['status', 'msg']
+});
+Ext.define('ServerResponseStore', {
+	extend: 'Ext.data.Store',
+	model: 'ServerResponseModel',
+    proxy: {
+    	type: 'memory',
+        reader: {
+        type: 'xml',
+        record: 'result',
+      }
+    }
+});
+</code>
+在這存取資料的Proxy使用了memory的type。以往都是使用Ajax的方式取得後端資料讓reader做處理，但因為我們已取得Server回傳的資料，所以需存取的是local的變數: response.responseXML。\\
+首先透過Ext.create去產生ServerResponseStore的instance，接著透過loadRawData去讀取DOM Document，最後我們就可以透過getAt取得對應的record(result element)。拿到record後，我們就可以使用get去取得對應的內容了。
+<code javascript>
+success: function(response){
+  var xml = response.responseXML;
+  var store = Ext.create('ServerResponseStore');
+  store.loadRawData(xml);
+  var result = store.getAt(0);
+  var msg = result.get('msg');
+  var status = result.get('status');
+  if( status == 'false' ){
+    window.alert('Failed:' + msg);
+  } else {
+    window.alert('Execute command successfully.');
+  }
+}
+</code>
+\\
+友藏內心獨白: 寫ExtJS其實花的時間比寫一般Javasript還花時間! 可能還不夠熟悉吧!
 ===== Reference =====
   * [[http://javaclaus.wordpress.com/2010/10/12/extjs-xml-and-the-dom/|ExtJS, XML, and the DOM]]
   * [[http://help.dottoro.com/ljssopjn.php|Dotoro - DOM Parser]]
+=====    =====
+----
+\\
+~~DISQUS~~