Extjs treePanel 无法展开

Question

在使用extjs中treePanel的时候，根节点无法展开子节点，如图所示：
尝试了很多方法都不行，纠结了半天还不知道怎么办？求各位帮帮忙。谢谢。
function alertPanel() {
var btn = new Ext.Button({
text : 'new window'
});
btn.on('click', function() {
var ww = new Ext.Window({
height : 300,
width : 300
});
ww.show();
});
var obj = {
title : "myjs",
width : 700,
height : 600,
maximizable : true,
minimizable : true,
html : 'Hello,easyjf open source',
buttons : [{
text : 'treepanel',
listeners : {
click : function() {
var tree = new Ext.tree.TreePanel({
title : '树的测试',
height : 300,
width : 300,
expanded : true,
root : new Ext.tree.AsyncTreeNode({
text : "根节点",
children : [{
text : "Child 1",
leaf : true
}, {
text : "Child 2",
leaf : true
}]
})
});
var win = new Ext.Window({
title : "简单window窗口",
height : 400,
width : 300,
items : tree
})
win.add(new Ext.Panel({
title : "面板"
}));
win.show(); }
}
}, btn]
};
var win = new Ext.Window(obj);
win.show();
}Ext JSJavaScripttreepaneltreeHTML

Answer 1

只是小改了下，你的代码没有任何问题，你按照下面的代码测试下。function alertPanel() {
var btn = new Ext.Button({
text : 'new window'
});
btn.on('click', function() {
var ww = new Ext.Window({
height : 300,
width : 300
});
ww.show();
});
var obj = {
title : "myjs",
width : 700,
height : 600,
maximizable : true,
minimizable : true,
html : 'Hello,easyjf open source',
buttons : [{
text : 'treepanel',
listeners : {
click : function() {
var tree = new Ext.tree.TreePanel({
title : '树的测试',
height : 300,
width : 300,
expanded : true,
root : new Ext.tree.AsyncTreeNode({
text : "根节点",
children : [{
text : "Child 1",
leaf : true
}, {
text : "Child 2",
leaf : true
}]
})
});
var win = new Ext.Window({
title : "简单window窗口",
height : 400,
width : 300,
items : tree
})
win.add(new Ext.Panel({
title : "面板"
}));
win.show(); }
}
}, btn]
};
var win = new Ext.Window(obj);
return win
}Ext.onReady(function(){
var w = alertPanel();
w.show();
})

Answer 2

额(⊙o⊙)… 我复制了你的代码，运行起来还是跟原来一样，无法展开，一直在那边load.....什么情况？？

Answer 3

这个好坑，你的BUG在我机器上没办法重现，只能看看有木有其他童鞋碰到类似的问题了。

Answer 4

不知道会不会是版本的问题呐？
另外请问下，split这个属性干啥地？API里面查不到的说

Answer 5

 知道了，split 是表示该面板上是否可被拉伸

Answer 6

看你的JS写法，应该是Extjs3.0+吧，要不你把数据封装成个JS对象试试看.var rootData = [{text : "Child1",leaf:true},{text:"Child2",leaf:true}]
new Ext.tree.AsyncTreeNode({
        text : "根节点",
        children : rootData
});

Answer 7

function alertPanel() {
    var btn = new Ext.Button({
                text : 'new window'
            });
    btn.on('click', function() {
                var ww = new Ext.Window({
                            height : 300,
                            width : 300
                        });
                ww.show();
            });
    var obj = {
        title : "myjs",
        width : 700,
        height : 600,
        maximizable : true,
        minimizable : true,
        html : 'Hello,easyjf open source',
        buttons : [{
                    text : 'treepanel',
                    listeners : {
                        'click' : function() {
                            var tree = new Ext.tree.TreePanel({
                                        title : '树的测试',
                                        height : 300,
                                        width : 300,
                                        expanded : true,
                                        root : {
                                                    text : "根节点",
                                                    children : [{
                                                                text : "Child 1",
                                                                leaf : true
                                                            }, {
                                                                text : "Child 2",
                                                                leaf : true
                                                            }]
                                                }
                                    });
                            var win = new Ext.Window({
                                        title : "简单window窗口",
                                        height : 400,
                                        width : 300,
                                        items : tree
                                    })
                            win.add(new Ext.Panel({
                                        title : "面板"
                                    }));
                            win.show();
                        }
                    }
                }, btn]
    };
    var win = new Ext.Window(obj);
    return win
}; 
Ext.onReady(function() {
var w = alertPanel();
     w.show();  
});

Answer 8

你好，我直接拷贝你的代码，现在treepanel那个窗口都无法显示了，通过UE的文件对比功能，发现你是把我原来那个JS文件里面的new Ext.tree.TreePanel这个删掉了，是吧？

Answer 9

你好，上周五感冒发烧了，没怎么上网来着，现在才看到你的留言。
8楼的代码在我这边都无法弹出含有treepanel的那个window了，更别说展开treepanel了，我刚学习ExtJs，还希望能够多多请教你怎么知道我的写法是ExtJs3.0+版本的说？的确，我模仿的视频里面的教程，视频里面用的是3.0+版本的，但是自己用的是2.0版本的。

Answer 10

抱歉，你的方法还是跟我原来的BUG症状一样的说

Answer 11

你好，请问你是如何看出那段代码是ExtJs3.0+版本的嘞？刚学习，求指教，谢谢！

Answer 12

var tree = new Ext.tree.TreePanel({}) 对象实例化的方式，类路径，每个版本都不一样的，比如3.0和4.0相比较，你就会发现很大的不同.
3.0的tree包下面有TreePanel,不过4.0下面就没有TreePanel只有Panel了,所以4.0想要继承TreePanel,你就得这么写Ext.create('Ext.tree.Panel',{})

Answer 13

我现在使用4.0版本之后，含有treepanel的window无法弹出来了，是不是就是因为你所说的原因？

Answer 14

我的就是4.0呀！我发给你的时候我测试了一下。可以显示的呀。
怎么回事呢？是不是你的EXT的组件就没有引全呢？

Answer 15

嗯。一开始我用EXT4.0测试，弹窗出不来，然后我看了看你的代码。我把那句new Ext.tree.TreePanel删除掉就显示正常了。

Answer 16

4.0 tree包下已经没有TreePanel这个类了。

Answer 17

非常谢谢。
我换成4.0的版本了，然后引用了8楼的代码，可以运行，但是之前不是说4.0版本里面没有TreePanel这个类了吗？那段代码里面使用到了TreePanel类的说。。感觉这个版本的问题，不知道怎么入门了。。

Answer 18

你好，我换成4.0版本的，现在可以运行了，但是以前2.0版本的有些代码无法运行了，刚入门Extjs,这下子不知道该如何是好了。
Ext.onReady(simpleTree);
//创造简单的树
function simpleTree() {
var vnode = new Ext.tree.TreeNode({
text : '树根'
});
vnode.appendChild(new Ext.tree.TreeNode({
text : '子节点'
}));
var tree = new Ext.tree.TreePanel({
title : 'simple树',
width : 400,
height : 300,
root : vnode
});
tree.render(document.body);
}
这个代码在4.0环境下，一直报错提示
正如20楼所述：4.0版本里面不包含treepanel类，但是你之前8楼给的代码可以运行的。雾水......
非常谢谢你们的帮忙

Answer 19

你要是想把extjs2.0升级到4.0。代码的格式大部分都不一样了。你这样子升级很痛苦的。