ExtJs加载JSON格式树

来源:互联网 发布:手机淘宝店铺公告设置 编辑:程序博客网 时间:2024/05/16 09:37

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

原创粉丝点击