ExtJs 3.1 XmlTreeLoader Example Error

2019年7月25日 215次阅读

前言
关键字：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
=

‘
Select a book to see more information…
‘
;

var tpl
=

new
Ext.Template(

‘
<h2 class=”title”>{title}</h2>
‘
,

‘
Published: {published}
‘
,

‘
Synopsis: {innerText}
‘
,

‘
<a href=”{url}” target=”_blank”>Purchase from Amazon</a>
‘

 );
 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