ExtJs TreePanel使用TreeLoader在IE下无法正常加载显示的解决方法
小菜使用如下代码生成TreePanel,代码与ExtJs自带的examples类似,在Firefox下运行正常,不过在IE下无法正常显示。
Code
<script language="JavaScript" type="text/javascript">
<!--
Ext.BLANK_IMAGE_URL = '../resources/ext/resources/images/default/s.gif';
Ext.onReady(function() {
var ddTree = new Ext.tree.TreePanel({
el: 'ddTree',
useArrows: true,
enableDD: true,
width: 200,
height: 300,
loader: new Ext.tree.TreeLoader({
dataUrl: "xxx.ashx"
}),
rootVisible: false,
root: new Ext.tree.AsyncTreeNode({}),
listeners: {
'beforeload': beforeloadHandler,
'load': loadHandler
}
});
ddTree.render();
ddTree.expandAll(); // 展开所有结点
var loading = null;
function beforeloadHandler() { // 加载前事件响应处理
loading = new Ext.LoadMask(Ext.get(ddTree.getEl()), { msg: "请等待" });
loading.show();
}
function loadHandler() { // 加载后事件响应处理
loading.hide();
}
});
-->
</script>
分析问题:
1、是否是xxx.ashx出现异常?
使用Firefox工作正常,所以排除,并且通过Firebug取到xxx.ashx输出json数据如下,所以该可能排除。
[{"id":59,"text":"web development","leaf":false,"children":[{"id":60,"text":"asp.net","leaf":false,"children":[]},{"id":61,"text":"php","leaf":false,"children":[]}]},{"id":62,"text":"web development","leaf":false,"children":[{"id":63,"text":"asp.net","leaf":false,"children":[]},{"id":64,"text":"php","leaf":false,"children":[]}]}]
2、TreePanel不兼容IE?
这显然是个笑话。不过可以验证下,将Firebug取到的json数据放入root结点的children: json。在IE下工作正常。所以该可能排除。
3、TreeLoader在IE下工作不正常?
暂时其它可能排除了,所以就它最可能了。
那怎么解决呢?可以使用Ajax取到xxx.ashx传来的数据,然后转为json放入root结点的children就ok了。试下。
<script language="JavaScript" type="text/javascript">
<!--
Ext.BLANK_IMAGE_URL = '../js/ext/images/default/s.gif';
Ext.onReady(function() {
var forumTree = new Ext.tree.TreePanel( {
el: 'forumtree',
useArrows: true,
enableDD: true,
width: 200,
height: 300,
rootVisible: false,
root: new Ext.tree.AsyncTreeNode({})
});
forumTree.render();
// 加载提示
var loading = null;
function showLoading() {
loading = new Ext.LoadMask(Ext.get(forumTree.getEl()), { msg: "请等待" });
loading.show();
}
function hideLoading() {
loading.hide();
}
showLoading();
// 由于使用TreeLoader在IE下无法正常加载数据,所以使用Ajax先获取数据再填充数据到root node下
Ext.Ajax.request({
url: 'xxx.ashx',
success: function(request) {
var data = Ext.util.JSON.decode(request.responseText);
forumTree.getRootNode().appendChild(data);
forumTree.getRootNode().expandChildNodes(true);
hideLoading();
},
failure: function() {
hideLoading();
Ext.MessageBox.show({
title: '版块管理',
msg: '对不起,加载数据出现异常,请重试!',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
}
});
});
-->
</script>
问题解决。。。
不过这样我们又会碰到一个问题,就是当CRUD这个树结点提交到Server后,如何刷新Tree。如果只是重新调用Ajax。会有重复的结点出现。
因为上面使用的是在root下用appendChild来实现。所以刷新时应该先删除root下的所有子结点。怎么删呢?
forumTree.root.removeChildNodes()?噢,sorry。这个方法不存在。简单我们自己来一个。
function removeChildNodes(node) {
while(node.firstChild) {
removeChildNodes(node.firstChild);
}
if(node.getDepth() != "0") {
node.remove();
}
}
在刷新的时候只要把forumTree.root传入该方法就可以了。
转载于:https://www.cnblogs.com/wliang22/archive/2011/02/24/1964163.html
ExtJs TreePanel使用TreeLoader在IE下无法正常加载显示的解决方法相关推荐
- windows10系统下mfc100u.dll加载失败的解决方法
今天通过SecureFX.v.8.0-kg.exe激活程序时,提示mfc100u.dll丢失,加载失败. 经过尝试,最终下载Microsoft Visual C++ 2010 Service Pack ...
- mysql正在加载_本地坏境或者服务器环境下phpmyadmin出现始终正在加载问题的解决方法...
可能很多使用php免备案虚拟主机的用户感觉这个标题非常神奇,为什么呢,说是虚拟空间要怎么设置呢,这个问题就不是您担心的问题了,您应该问问空间商为什么了,当然这个前提下要保证自己的网络畅通无阻,认为本地 ...
- C# .NET CORE在linux下读取图片加载到文档方法 Gdip libgdiplus
.net在window平台使用的图片替换及绘画功能using System.Drawing; 在.net core使用runtime.osx.10.10-x64.CoreCompat.System.D ...
- 天地图服务在https协议下请求正常加载显示地图
首先把需要使用的天地图服务,如矢量地图服务地址如下: //天地图矢量服务 "http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQ ...
- 怎么样给下拉框加载背景色
选择自 PPLUNCLE 的 Blog 部分代码: ------aspx页面: <tr> <td><select id="job" name=&q ...
- 多线程下ArrayList类线程不安全的解决方法及原理
多线程下ArrayList类线程不安全的解决方法及原理 参考文章: (1)多线程下ArrayList类线程不安全的解决方法及原理 (2)https://www.cnblogs.com/fangting ...
- 虚拟机下Ubuntu没有GUI图形界面,解决方法
虚拟机下Ubuntu没有GUI图形界面,解决方法 参考文章: (1)虚拟机下Ubuntu没有GUI图形界面,解决方法 (2)https://www.cnblogs.com/echohao/p/5895 ...
- 【Linux笔记】CentOS下找不到eth0设备的解决方法
[Linux笔记]CentOS下找不到eth0设备的解决方法 参考文章: (1)[Linux笔记]CentOS下找不到eth0设备的解决方法 (2)https://www.cnblogs.com/ly ...
- Ubuntu下vi编辑器方向键变成字母的解决方法
Ubuntu下vi编辑器方向键变成字母的解决方法 非常简单的一个操作,只需2步,完美解决Ubuntu下vi编辑器方向键变字母的问题. 一.执行命令 sudo apt-get remove vim-co ...
最新文章
- h5 数字变化_前端/h5 D3.js实现根据数据动态更新图形/类似进度实时变化效果
- ExtJS中给Tree节点加click事件
- C++ 线程池的思想
- Failed to execute
- 通过Java Hipster升级Spring Security OAuth和JUnit测试
- DOM 基础 HTML标签 元素 属性
- MFC中Combo 下来菜单不能展开(只显示一点点)
- 开源监控解决方案Nagios+Cacti+PNP4Nagios+NConf+NDOUtils+Nagvis(九)NagVis安装
- 为什么没人会 COBOL 编程了?
- velocity参数重新赋值_Velocity 语法详解
- pta:人民币与美元汇率兑换程序(python)
- san分布式共享文件系统_SAN存储区域网络共享软件全攻略
- 华为S9306交换机版本升级及补丁安装步骤
- 这是一个只有一句话的木MA
- 闭环系统的零极点图判定稳定性_实验五 线性系统的稳定性和稳态误差分析
- 【Yocto学习入门】03 - Yocto 代码初步了解
- gpa2.8申请美国计算机硕士,GPA2.8的她,跨专业申请到美国匹兹堡大学 | HGCP美国本科留学...
- Retrofit教程
- RBF神经网络——基于近红外光谱的汽油辛烷值预测
- 中华云盒M1刷Linux教程,再谈中华云盒M1刷机详细教程,包教包会终结版