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 }] }] };