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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
Javascript Math对象
Aug 13 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
js异步编程小技巧详解
Aug 14 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
Python版实现微信公众号扫码登陆
May 28 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+DBM的同学录程序(4)
2006/10/09 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
Python删除空文件和空文件夹的方法
2015/07/14 Python
python如何在终端里面显示一张图片
2016/08/17 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
python安装twisted的问题解析
2018/08/21 Python
Python实战购物车项目的实现参考
2019/02/20 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
python tkinter实现连连看游戏
2020/11/16 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python