Question

extjs里的treepanel的用法

new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
}, {
region: 'center',
xtype: 'tabpanel',
// remaining code not shown ...
}]
});
这段js是某教程里拷贝过来的,打开页面后,该段代码未起作用,想问下是什么原因,跟extjs的版本有没关系.我用的是extjs4,包,路径方面的因素可以排除.因为若将这段代码改为一句简单的alert("1");时,一切都是正常的,或者用viewport时也正常

Answer 1

　　TreePanel继承自Panel，在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点，比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍几个extjs中treepanel例子：

一、TreePanel基本配置参数:

			
//TreePanel配置参数

animate:true//展开,收缩动画,false时,则没有动画效果

autoHeight:true//自动高度,默认为false

enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable

enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)

enableDrop:true//仅仅drop

lines:true//节点间的虚线条

loader:Ext.tree.TreeLoader//加载节点数据

root:Ext.tree.TreeNode//根节点

rootVisible:false//false不显示根节点,默认为true

trackMouseOver:false//false则mouseover无效果

useArrows:true//小箭头
	

二、TreeNode的基本配置参数:

			
//TreeNode常用配置参数

checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框

expanded:fasle//展开,默认不展开

href:"http:/www.cnblogs.com"//节点的链接地址

hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开

leaf:true//叶子节点,看情况设置

qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下

text:"节点文本"//节点文本

singleClickExpand:true//用单击文本展开,默认为双击

三、treepanel实例：

第一个静态树--最简单的树：

Ext.onReady(function(){

   var mytree=new Ext.tree.TreePanel({

       el:"container",//应用到的html元素id

       animate:true,//以动画形式伸展,收缩子节点

       title:"Extjs静态树",

       collapsible:true,

       rootVisible:true,//是否显示根节点

       autoScroll:true,

       autoHeight:true,

       width:150,

       lines:true,//节点之间连接的横竖线

       loader:new Ext.tree.TreeLoader(),//

       root:new Ext.tree.AsyncTreeNode({

           id:"root",

           text:"根节点",//节点名称

           expanded:true,//展开

           leaf:false,//是否为叶子节点

           children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]

       })

   });

   mytree.render();//不要忘记render()下,不然不显示哦

})
	

效果图:

Answer 2

EXT 版本不一样，差别很大。 不同的环境同样的代码也不见得能跑起来。 建议先找个入门的教程看看吧。

这明显是3以前的树的写法。
Ext 4的树结构已经完全变了，所以这个肯定不能跑。
如果没入门，先找个入门教程。 如果已经入门，直接看官方例子和文档就可以了

Answer 3

你的那个dataUrl是属性，应该是要通过方法来指定路径。

你可以试试这两个方法
expandPath( String path , [String attr] , [Function callback] ) : void
参数项：
path : String 路径
attr : String 路径中使用的属性
callback : Function
当展开完成时执行的回调。回调执行时会有以下两个参数 (bSuccess, oLastNode)bSuccess表示展开成功而oLastNode就表示展开的最后一个节点
返回值： void

selectPath( String path , [String attr] , [Function callback] ) : void
选择树的指定的路径。路径可以从Ext.data.NodegetPath对象上获取
参数项：
path : String 路径
attr : String 路径中使用的属性
callback : Function
当展开完成时执行的回调。回调执行时会有以下两个参数 (bSuccess, oLastNode)bSuccess表示选区已成功创建而oLastNode就表示展开的最后一个节点
返回值：
void