ExtJs 3.1 XmlTreeLoader Example Error_extjs

Foreword
Keywords: ExtJs 3.1 XmlTreeLoader Example Error, XmlTreeLoader error, TreePanel Error

I have been struggling with the XmlTreeLoader example of ExtJs 3.1 for nearly an afternoon and night. The official example has no problem and can load xml data. The local IIS is dead and does not report an error. Directly checking the official code is exactly the same. I accidentally searched it this morning. It was not found in the official website, but in what looked like a Korean blog. As a tribute, this article will be a simple Chinese "translation".

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

Text

1. Code location: Ext3.1examplestreexml-tree-loader.js

　 2. Pay attention to the new code marked in red ", requestMethod: 'GET'"!!

Copy code The code is as follows:

/*!
* 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(
'

{title}

',
'

Published: {published}

',
'

< ;b>Synopsis: {innerText}

',
'

Purchase from Amazon> ;

'
);
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
}]
});
});

Conclusion

Don’t give up and accept a failed search. Keep trying to change the search keywords. Even if you use PowerWord to translate it into English, you have to try hard. It doesn’t matter if you can’t understand it. Just understand the code. Code without borders : )