extjs入门教程 extjs里的treepanel的用法
这篇文章给大家聊聊关于extjs入门教程，以及extjs里的treepanel的用法对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
谁会extJS 教教我
先下载ExtJS的库，部署到PHP环境下（不懂PHP的去下载一个phpstudy，里面都集成好了，把ExtJS库拷贝到www文件夹下就OK了）。
ExtJS不需要你写任何HTML代码，你新建一个HTML页面，引入他的ext-all.css,ext-base-debug.js,ext-all-debug.js(debug是调试版本)，打开火狐，搜索插件（firbug）并安装。然后你新建一个js文件，里面写上:
Ext.onReady(function(){
console.log("firbug日志输出专用函数console.log，IE不支持");
Ext.Msg.Show("标题","我的ExtJS之旅正式开始");
});
用火狐运行HTML页面，你的学习之路正式开始(firbug控制栏会输出"firbug日志输出专用函数console.log，IE不支持",页面上会显示一个ExtJS风格的alert)。
然后先看他的例子，每个例子都看，并模仿着写，照抄也无所谓，但是要理解他里面的参数都是做什么用的，比如closeAction:"hide"、title:"你好"、resizable:false等等。
你在模仿他例子的时候，你会发现有很多参数都不知道是干什么用的，打开它的API（php环境下输入http://localhost/extjs目录名/docs/index.html）
打开API，开始正式学习它。
当你感觉到自己可以写一个Window啊，Panel啊，Grid啊之后，去下载陈老板的ExtJS教学视频。当然，最好能买一本《深入浅出ExtJS》，个人觉得比较浪费，但是前期入门还是很不错的。一些陈老板没细说的问题，在书里都能找到答案。
加群50011014，陈老板在群里，但是他生病了。现在（包括以后）很少上线了。能遇到最好，遇不到群里高手也很多，主动双击私聊问，一般没人拒绝你。公聊估计搭理你的不多。
最后补充一下，ExtJS上手慢但是一旦上手之后，开发起来很爽快。基于JavaScript，所以你JavaScript怎么说也得有最起码的一点点常识。
祝你好运。
extjs里的treepanel的用法
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(){
varmytree=newExt.tree.TreePanel({
el:"container",//应用到的html元素id
animate:true,//以动画形式伸展,收缩子节点
title:"Extjs静态树",
collapsible:true,
rootVisible:true,//是否显示根节点
autoScroll:true,
autoHeight:true,
width:150,
lines:true,//节点之间连接的横竖线
loader:newExt.tree.TreeLoader(),//
root:newExt.tree.AsyncTreeNode({
id:"root",
text:"根节点",//节点名称
expanded:true,//展开
leaf:false,//是否为叶子节点
children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]
})
});
mytree.render();//不要忘记render()下,不然不显示哦
})
效果图:
非常感谢您的阅读！我们希望本文对于解决您关于extjs入门教程的问题提供了一些有价值的信息。如果您还有其他疑问，我们将很乐意为您提供进一步的帮助。