Extjs 实战之 Ext.tree.TreePanel Tree无法显示

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

1.

问题描述： 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'}]

2.

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

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