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
}]
});
});
* 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
}]
});
});
本文转自博客园农民伯伯的博客,原文链接:ExtJs 3.1 XmlTreeLoader Example Error,如需转载请自行联系原博主。