extjs---树

今天讲的是extjs中的树形结构，下面写一个简单的小例子，来熟悉一下extjs树形的一些属性等
首先创建一个js文件
tree.js
(function(){
	Ext.onReady(function(){
		/*
		 * tree概念
		 * treePanel组件的基本应用
		 */
		var tree=Ext.create('Ext.tree.Panel',{
			title:'树形结构',
			renderTo:Ext.getBody(),
			width:400,
			height:800,
			rootVisible:true,//根节点是否显示
						root:{
				text:'我是根节点',
				expanded:false,//是否展开
				children:[{
					text:'我是第一个子节点',
					leaf:true
				},{
					text:'我是第二个子节点',
					leaf:true
				},{
					text:'我是第三个子节点',
					leaf:false,//为false时显示的是一个可以打开的文件夹,默认为false
					children:[{
						text:'我是第三个子节点的孩子，我叫3-1',
						children:[{
							text:'我叫3-1-1，我是最后一个啦',
							leaf:true
						}]
					}]
				}]
			}
		});
	});
})();
在jsp页面中引进所需要的js文件
通过上面的代码，在运行之后就可以显示出树状结构啦
因为把树状结构的内容全部写在面板中内容会比较复杂而且容易出错，所有也可以把树状结构的内容提取出来
//定义一个存储 数据的store
		var treeStore=Ext.create('Ext.data.TreeStore',{
				root:{
				text:'我是根节点',
				expanded:false,//是否展开
				children:[{
					text:'我是第一个子节点',
					leaf:true
				},{
					text:'我是第二个子节点',
					leaf:true
				},{
					text:'我是第三个子节点',
					leaf:false,//为false时显示的是一个可以打开的文件夹,默认为false
					children:[{
						text:'我是第三个子节点的孩子，我叫3-1',
						children:[{
							text:'我叫3-1-1，我是最后一个啦',
							leaf:true
						}]
					}]
				}]
			}
		});

在需要这些数据时，添加一个store属性即可
var tree=Ext.create('Ext.tree.Panel',{
			title:'树形结构',
			renderTo:Ext.getBody(),
			width:400,
			height:800,
			rootVisible:true,//根节点是否显示
			store:treeStore		
		});