ExtJs 3.1 XmlTreeLoader Example Error-阿里云开发者社区

开发者社区> 开发与运维> 正文

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
        }]
    });
});
复制代码


   

结束语

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


转载:http://www.cnblogs.com/over140/archive/2010/02/08/1665698.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章