ExtJs 3.1 XmlTreeLoader Example Error

前言
　　关键字：ExtJs 3.1 XmlTreeLoader Example Error,XmlTreeLoader 错误,TreePanel Error

　　ExtJs 3.1的XmlTreeLoader例子折腾了我近一个下午加晚上，官方的例子没有问题，可以加载xml的数据，本地IIS死活不行，也不报错，直接查看官方的代码也是一模一样的，今早意外给让我搜到了，不是在官方，而是在貌似一个韩国的博客里面找到的，致敬一下，本文且做其简单中文"译"本。

 

原文

　　http://javarush.com/entry/ExtJS-XmlTreeLoader-Error 

 

正文

　　 1.　　代码位置：Ext3.1\examples\tree\xml-tree-loader.js

　　 2.　　注意标红新增代码",requestMethod: 'GET'"!!

   /*
   !
 * Ext JS Library 3.1.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * 
   http://www.extjs.com/license
   
 
   */
   


   //
   

   //
    Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:

   //

   Ext.app.BookLoader 
   =
    Ext.extend(Ext.ux.tree.XmlTreeLoader, {
    processAttributes : function(attr){
        
   if
   (attr.first){ 
   //
    is it an author node?

            
   //
    Set the node text that will show in the tree since our raw data does not include a text attribute:
   

               attr.text 
   =
    attr.first 
   +
    
   '
    
   '
    
   +
    attr.last;

            
   //
    Author icon, using the gender flag to choose a specific icon:
   

               attr.iconCls 
   =
    
   '
   author-
   '
    
   +
    attr.gender;

            
   //
    Override these values for our folder nodes because we are loading all data at once.  If we were
            
   //
    loading each node asynchronously (the default) we would not want to do this:
   

               attr.loaded 
   =
    
   true
   ;
            attr.expanded 
   =
    
   true
   ;
        }
        
   else
    
   if
   (attr.title){ 
   //
    is it a book node?

            
   //
    Set the node text that will show in the tree since our raw data does not include a text attribute:
   

               attr.text 
   =
    attr.title 
   +
    
   '
    (
   '
    
   +
    attr.published 
   +
    
   '
   )
   '
   ;

            
   //
    Book icon:
   

               attr.iconCls 
   =
    
   '
   book
   '
   ;

            
   //
    Tell the tree this is a leaf node.  This could also be passed as an attribute in the original XML,
            
   //
    but this example demonstrates that you can control this even when you cannot dictate the format of
            
   //
    the incoming source XML:
   

               attr.leaf 
   =
    
   true
   ;
        }
    }
});

Ext.onReady(function(){

    var detailsText 
   =
    
   '
   <i>Select a book to see more information...</i>
   '
   ;

    var tpl 
   =
    
   new
    Ext.Template(
        
   '
   <h2 class="title">{title}</h2>
   '
   ,
        
   '
   <p><b>Published</b>: {published}</p>
   '
   ,
        
   '
   <p><b>Synopsis</b>: {innerText}</p>
   '
   ,
        
   '
   <p><a href="{url}" target="_blank">Purchase from Amazon</a></p>
   '
   
    );
    tpl.compile();

    
   new
    Ext.Panel({
        title: 
   '
   Reading List
   '
   ,
        renderTo: 
   '
   tree
   '
   ,
        layout: 
   '
   border
   '
   ,
        width: 
   500
   ,
        height: 
   500
   ,
        items: [{
            xtype: 
   '
   treepanel
   '
   ,
            id: 
   '
   tree-panel
   '
   ,
            region: 
   '
   center
   '
   ,
            margins: 
   '
   2 2 0 2
   '
   ,
            autoScroll: 
   true
   ,
            rootVisible: 
   false
   ,
            root: 
   new
    Ext.tree.AsyncTreeNode(),

            
   //
    Our custom TreeLoader:
   

               loader: 
   new
    Ext.app.BookLoader({
                dataUrl:
   '
   xml-tree-data.xml
   '
   
                
   ,requestMethod: 'GET'
   
            }),

            listeners: {
                
   '
   render
   '
   : function(tp){
                    tp.getSelectionModel().on(
   '
   selectionchange
   '
   , function(tree, node){
                        var el 
   =
    Ext.getCmp(
   '
   details-panel
   '
   ).body;
                        
   if
   (node 
   &&
    node.leaf){
                            tpl.overwrite(el, node.attributes);
                        }
   else
   {
                            el.update(detailsText);
                        }
                    })
                }
            }
        },{
            region: 
   '
   south
   '
   ,
            title: 
   '
   Book Details
   '
   ,
            id: 
   '
   details-panel
   '
   ,
            autoScroll: 
   true
   ,
            collapsible: 
   true
   ,
            split: 
   true
   ,
            margins: 
   '
   0 2 2 2
   '
   ,
            cmargins: 
   '
   2 2 2 2
   '
   ,
            height: 
   220
   ,
            html: detailsText
        }]
    });
});
  

　　 

结束语

　　不要放弃和接受一次失败的搜索，不断的尝试改变搜索关键字，哪怕是用词霸翻成英文也得努力去试试，看不懂不要紧，看懂代码就行，代码无国界: )