Extjs 实战之 Ext.tree.TreePanel Tree无法显示-优快云博客

本文详细介绍了使用Ext.ux.tree.ColumnTree类构建TreePanel时遇到的IE浏览器显示问题，分析了原因在于类名的使用，并提供了解决方法。同时，讨论了JSON数据格式对跨浏览器兼容性的影响，以及如何避免此类问题。

这里使用的是 Ext.ux.tree.ColumnTree，这是一个TreePanel的扩展类，从Extjs下载的官方包里就包含了这个。

问题描述： tree 的头部显示正常，数据部分在Firefox 显示正常，在IE中无法显示。(如以下code)

原因解析： class不能作为column 的名字，在IE中会有问题，建议换成其他的,比如classname这样的。

var tree = new Ext.ux.tree.ColumnTree({ id: 'TreeGridId', width: 1000, height: "100%", rootVisible:false, autoScroll:true, title: ' ', renderTo: Ext.getBody(), columns:[{ header:'Name', width:180, dataIndex:'name' },{ header:'Class', width:100, dataIndex:'class' },{ header:'Owner', width:100, dataIndex:'owner' }], loader: new Ext.tree.TreeLoader({ dataUrl:'jsdata.dat', uiProviders:{ 'col': Ext.ux.tree.ColumnNodeUI } }), root: new Ext.tree.AsyncTreeNode({ text:'root' }) });
json数据格式如下：

[{name:'teste',class:'ClassName',owner:'testOwner',uiProvider:'col'},{name:'teste2',class:'ClassName2',owner:'testOwner2',uiProvider:'col'}]

另外， json data的格式如果不标准，比如缺少逗号什么的，有时候也会导致在Firefox正常，IE不正常的状况。

总结： tree的数据显示出现Firefox正常，IE不正常时，一般不会报错误，通过错误控制台或是debug工具基本上很难直接找到原因，不过可以猜想的是，原因应该是出在json数据的格式上面，可以逐步从一笔数据，一个栏位的显示来找原因