ExtJs 3.1 XmlTreeLoader Example Error


Posted in Javascript onFebruary 09, 2010

前言

关键字: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 
}] 
}); 
});

结束语

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

Javascript 相关文章推荐
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
javascript常用函数(1)
Nov 04 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 #Javascript
一个XML格式数据转换为图表的例子
Feb 09 #Javascript
javascript 解析url的search方法
Feb 09 #Javascript
toString()一个会自动调用的方法
Feb 08 #Javascript
jQuery AJAX回调函数this指向问题
Feb 08 #Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 #Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 #Javascript
You might like
PHP print类函数使用总结
2010/06/25 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
详解PHP PDO简单教程
2019/05/28 PHP
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
python中的代码编码格式转换问题
2015/06/10 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
工艺员岗位职责
2014/02/11 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
Python中可变和不可变对象的深入讲解
2021/08/02 Python