ExtJs加载JSON格式树

html文件中加入
<script src="treedata.js"></script>
/**
		 * 动态加载JSON格式的数据
		 */	
		var mytree_2=new Ext.tree.TreePanel({
			//el:"container",//应用到的html元素id
			animate:true,//以动画形式伸展,收缩子节点
			//title:"Extjs静态树",
			//collapsible:true,
			rootVisible:true,//是否显示根节点
			autoScroll:true,
			autoHeight:true,
			//height:'100%',
			width:'100%',
			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({
			text:'ExtJs',
			id:'root',
			expanded:true,
			children:[Docs.classData]
			}),
			collapseFirst:false  
		});

 treedata.js内容

var Docs = {};
Docs.classData={
	"id":"root",
	"iconCls":"icon-docs",
	"text":"根节点",
	"singleClickExpand":true,
	"expanded":true,
	"leaf":false,
	"children":[{
		"id":"id1",
		"iconCls":"icon-pkg",
		"text":"子节点一",
		"qtip":"asdk",//需要使用 Ext.QuickTips.init();//开启提示功能 
		"singleClickExpand":true,
		"expanded":true,
		"leaf":true
	},{
		"id":"child2",
		"iconCls":"icon-pkg",
		"text":"子节点二",
		"singleClickExpand":true,//单击节点是否展开
		"expanded":true,
		"leaf":false,
		"children":[{
			"id":"child21",
			"iconCls":"icon-pkg",
			"text":"子节点三",
			"singleClickExpand":true,//单击节点是否展开
			"expanded":true,
			"leaf":true
		}]
	}]
};

 

你可能感兴趣的:(JavaScript,html,json,ext)