您的位置：首页 > Web前端 > JavaScript

Extjs中关于treePanel的demo实例

2014-11-18 16:33 375 查看

之前两个项目都开发过公司项目的部门组织，和行政区域模块，这些模块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>的集合数据，

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Extjs中 关于treePanel的demo实例

Extjs中关于treePanel的demo实例