Extjs中关于treePanel的demo实例

来源：互联网发布：java影院售票系统编辑：程序博客网时间：2024/06/05 17:59

之前两个项目都开发过公司项目的部门组织，和行政区域模块，这些模块web都会涉及到关于组织结构树的构建和使用；先说说Extjs中对于树提供了支持：分别有Ext.tree.Panel和Ext.data.TreeStore;

先看一个比较简单的tree demo：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <link href="d:\130566\Desktop\ExtjsDemo\ext-all.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src='d:\130566\Desktop\ExtjsDemo\ext-all.js' ></script></script>  <script type="text/javascript">Ext.onReady(function(){Ext.application({name:'HelloExt',launch:function(){var store = Ext.create('Ext.data.TreeStore', {root: {expanded: true,children: [ {text:'中国',expanded: true,children:[{ text: "北京", leaf: true },{ text: "上海", expanded: true, children: [{ text: "黄浦", leaf: true },{ text: "浦东", leaf: true}] },{ text: "重庆", leaf: true }]}]}});Ext.create('Ext.tree.Panel', {title: 'Simple Tree',width: 400,height: 250,useArrows:true,//使用Vista-style样式的箭头。rootVisible: true, //是否隐藏根节点autoScroll:true,margin:false,  border : false,animate:true, //动画效果store: store,viewConfig: {plugins: { ptype: 'treeviewdragdrop',appendOnly:true }},renderTo: Ext.getBody()});  }   });}); </script> </head> <body>   </body></html>

【注】：该demo 中所提供的数据缓存是来自于界面构件好的，但是项目中我们构建一颗树的时候，肯定数据都是动态的；都是从后台拼接好json 之后传递过来的。

下面看一个demo :

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <link href="d:\130566\Desktop\ExtjsDemo\ext-all.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src='d:\130566\Desktop\ExtjsDemo\ext-all.js' ></script></script>  <script type="text/javascript">Ext.onReady(function(){Ext.application({name:'HelloExt',launch:function(){Ext.define('newDemo.TreeStore',{extends:'Ext.data.TressStore',autoSync:true,proxy:{type:'ajax',url:'/ XXXX.action',},root:{id:'01', //根路径text:'中国',expanded:true,},sorters : [{property : 'leaf',direction : 'ASC'}]});Ext.create('Ext.tree.Panel', {title: 'Simple Tree',width: 400,height: 250,useArrows:true,//使用Vista-style样式的箭头。rootVisible: true, //是否隐藏根节点autoScroll:true,margin:false,  border : false,animate:true, //动画效果store: Ext.create('newDemo.TreeStore'),viewConfig: {plugins: { ptype: 'treeviewdragdrop',appendOnly:true }},renderTo: Ext.getBody()});  }   });}); </script> </head> <body>   </body></html>

前端可以这样构造，但是后端的数据需要构造一个树结构的ArrayList<treeNodes>的集合数据，

0 0

Extjs中 关于treePanel的demo实例

Extjs中关于treePanel的demo实例