ExtJs生成静态树

类Ext.tree.TreePanel

包：        Exttree

定义的文件： TreePanel.js

类全称：    Ext.tree.TreePanel

继承自于： Ext.Panel

TreePanel为树状的数据结构提供了树状结构UI表示层。

TreeNodes是加入到TreePanel的节点，可采用其attributes属性 来定义程序的元数据

TreePanel渲染之前必须有一个root根节点的对象。除了可以用root配置选项指定外，还可以使用setRootNode的方法。

ExtJs静态树

 

    Ext.onReady(function(){
		Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
		
		var mytree=new Ext.tree.TreePanel({
			region: 'west',
			//el:"container",//应用到的html元素id
			animate:true,//以动画形式伸展,收缩子节点
			title:"Extjs静态树",
			collapsible:true,
			rootVisible:true,//是否显示根节点
			autoScroll:true,
			autoHeight:true,
			split: true,
			width:200,
			lines:true,//节点之间连接的横竖线
			//树加载器（TreeLoader）的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。返回值必须是以树格式的javascript数组
			loader: new Ext.tree.TreeLoader({
				preloadChildren: true,//若为true，则loader在节点第一次访问时加载"children"的属性
				clearOnLoad: false//（可选）默认为true。在读取数据前移除已存在的节点
			}),
			root:new Ext.tree.AsyncTreeNode({
				id:"root",
				text:"根节点",//节点名称
				expanded:true,//展开
				leaf:false,//是否为叶子节点
				children:[{
					id:'iui',
					text:'子节点一',
					leaf:true
				},{
					id:'child2',
					text:'子节点二',
					children:[{
						text:"111"
					}]
				}]
			}),
			listeners: {
					click: function(n) {
						Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '",id=' + n.attributes.href );
					}
				}
		});
		
		
		var viewport = new Ext.Viewport({
			layout: 'border',
			items: [
				mytree
			, {
				region: 'center',
				xtype: 'tabpanel'
				// remaining code not shown ...
			}]
		});
});