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 相关文章推荐
解密效果
Jun 23 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
Javascript实现打鼓效果
Jan 29 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
PHP array_push 数组函数
2009/12/26 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
详解JavaScript函数
2015/12/01 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
python中xrange和range的区别
2014/05/13 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python机器学习之神经网络(一)
2017/12/20 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python实现微信自动回复机器人功能
2019/07/11 Python
Python logging模块原理解析及应用
2020/08/13 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
客服服务心得体会
2013/12/30 职场文书
党支部换届选举方案
2014/05/08 职场文书
科学发展观活动总结
2014/08/28 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书