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全部源代码
May 04 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
javascript折半查找详解
Jan 26 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
在实例中重学JavaScript事件循环
Dec 03 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
图形数字验证代码
2006/10/09 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Pytorch转tflite方式
2020/05/25 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
python3实现飞机大战
2020/11/29 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
领导的自我鉴定
2013/12/28 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
面试感谢信范文
2015/01/22 职场文书