前言
关键字: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',
新闻热点
疑难解答
图片精选