学习笔记-extjs treepanel

        以前都是零散的学习extjs，只做过两个类似的后台界面一类的，对于基础知识的掌握还不熟。工作项目做的是extjs 3.4版本的，重新学习了一个多月，还是很多不会的地方呢，把平时的笔记贴出来，时不时看一看也是好的。

下面，演示一个extJs treepanel的创建吧。先看看最终的图形。

主要是采用从本地读取文件的方式来显示整棵树的，而图标也是参考其它文档改变css文件显示。主要代码如下

图标css文件引入

.x-tree-node-collapsed .x-tree-node-icon{background-image:url(../images/icon/book.png);}.x-tree-node-expanded .x-tree-node-icon{background-image:url(../images/icon/book_open.png);}.x-tree-node-leaf .x-tree-node-icon{background-image:url(../images/icon/page_white.png);}

主要的js代码

var tree = new Ext.tree.TreePanel({    renderTo: 'tree',//将整棵树面板渲染到id为tree的节点上面    width: '100%',autoHeight: true,    useArrows: true,//使用箭头图标    autoScroll: true,//overflow的时候，加上滚动条    animate: true,//展开的时候动态展示    enableDD: false,//enable drag and drop，是否允许拖放    containerScroll: true,//滚动条    frame: false,//没有面板    border: false,//边框不可见    rootVisible: false,//根元素不可见    collapsible: false,//不可以收缩窗口    loader: new Ext.tree.TreeLoader({ //树加载器（TreeLoader）的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。返回值必须是以树格式的javascript数组      preloadChildren: true,    clearOnLoad: false,//（可选）默认为true。在读取数据前移除已存在的节点     dataUrl: 'datas/treedata.json'    }),    root: new Ext.tree.AsyncTreeNode({            expand: true,            text:'ExtJs',            draggable: false,        id: 'source'        })});tree.getRootNode().expand();

treedata.json文件

[         {text:'not leaf',children:[{text:'is leaf',leaf:true}]},         {text:'is leaf',children:[{text:'aa', leaf:true}]}     ]   

• 学习笔记-extjs treepanel
• ExtJS学习笔记（三） TreePanel(1)
• ExtJS学习笔记（三） TreePanel(2)
• ExtJS学习笔记（三） TreePanel(3)
• ExtJS学习之TreePanel
• ExtJS学习之TreePanel
• Extjs学习笔记-1.TreePanel+TabPanel简单的树形菜单
• extjs treepanel
• Extjs学习总结之24treePanel
• ExtJS学习1--treepanel的几个问题，导盲贴
• Extjs学习总结之26treepanel异步加载
• ExtJS专题-TreePanel(1)
• ExtJS专题-TreePanel(1)
• ExtJS专题-TreePanel(2)
• ExtJS专题-TreePanel(1)
• ExtJs之TreePanel篇
• Extjs的TreePanel
• ExtJs——TreePanel！！！
• 解决VS2010菜单自动隐藏效果
• java设计模式总结
• jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
• 各种排序算法分析
• sql server开启sa用户
• 学习笔记-extjs treepanel
• eclipse的编码环境简介
• sicily题目分类
• 遇到的问题-----mongodb.MongoException$Network: can't call something
• jxl framework to manager Excel
• laravel 使用artisan命令新增数据库字段
• Oralce中设置小数点位数
• 指针总结
• Haproxy+Keepalived搭建Weblogic高可用负载均衡集群