学习笔记-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}]}     
]