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 encodeURI和encodeURIComponent的比较
Apr 03 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
javascript 常见功能汇总
Jun 11 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
8个有意思的JavaScript面试题
Jul 30 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 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
很实用的一个完整email发送程序
2006/10/09 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python中自定义函数的教程
2015/04/27 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
python实现自动清理重复文件
2020/08/24 Python
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
铁路工务反思材料
2014/02/07 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
小学庆六一活动总结
2014/08/28 职场文书
赔偿协议书范本
2014/09/12 职场文书
小学重阳节活动总结
2015/03/24 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android