extjs 静态树形菜单布局

xiejunna

于 2019-04-18 18:43:23 发布

阅读量484

点赞数

分类专栏： extjs 文章标签： extjs

本文链接：https://blog.csdn.net/xiejunna/article/details/89385350

版权

extjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

运行效果：
在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
      	<script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js"></script>
      	
		<script>
			Ext.onReady(function(){
				var dockedItems1 = [];
				var toolbar = Ext.create('Ext.toolbar.Toolbar', {//创建工具栏
					renderTo : document.body,
					xtype : 'toolbar',
					dock : 'top',//dock可以理解为停靠
					buttonAlign : 'right',
				});
				//工具栏的增删改查按钮
				toolbar.add({
				    text: '新增',
					glyph : 0xf016,
					handler:function(){
						console.log("新增");
					}
				 });
				 
				toolbar.add({
				    text: '编辑',
					glyph : 0xf016,
					handler:function(){
						console.log("编辑");
					}
				 });
				 
			 	toolbar.add({
				    text: '查询',
					glyph : 0xf016,
					handler:function(){
						console.log("查询");
					}
				 });
				 
				toolbar.add({
				    text: '删除',
					glyph : 0xf016,
					handler:function(){
						console.log("删除");
					}
				});
			 
      			dockedItems1.push(toolbar);
      		
      			dockedItems1.push({ //页面下面的分页插件
					xtype : 'pagingtoolbar',
					//store : infoStore,
					dock : 'bottom',//dock可以理解为停靠
					displayInfo : true
				}); 
				
				var tabItem = [
					{
						title: 'tab1',
				        dockedItems : dockedItems1,
				        html: 'tab1'
				   },
				   {
						title: 'tab2',
				            //dockedItems : dockedItems2,
				        html: 'tab2'
				   },{
						title: 'tab3',
				            //dockedItems : dockedItems2,
				        html: 'tab3'
				    }
				];
				//树形菜单的数据源
				var store = Ext.create('Ext.data.TreeStore', {
				    root: {
				    	text:'根菜单',//根菜单的名称
				        expanded: true,//true：展开子菜单
				        children: [
				            { 
				            	text: "功能1", 
				            	leaf: true 
				            	
				            },
				            { text: "功能2", expanded: true, 
				            children: [
					                { text: "功能2.1", leaf: true },
					                { text: "功能2.2", leaf: true}
				            	] 
				            },
				            { text: "功能3", leaf: true }
				        ]
				    }
				});
				
				//================================================
				//viewport自适应布局
				Ext.create('Ext.container.Viewport', {
			    layout: 'border',
			    items: [{
			        region: 'north',
					title:'标题栏',
			    },
			    {
			    	// 这里通常可以使用 TreePanel 或者 AccordionLayout布局的导航菜单
			        region: 'west',
			        collapsible: true,
			        layout : "fit",
			        xtype: 'treepanel',
			        title: '树形结构布局菜单',
				    width: 200,
				    store: store,//树形菜单的数据源
				    animate : true,//展开收起执行动画
				    rootVisible: true,//false，隐藏根节点
				    renderTo: Ext.getBody(),
				    listeners: {
				        click: {
				            element: 'el', //bind to the underlying el property on the panel
				            fn: function(e){
				            	//console.log(e);
				            	var id = e.item.id;
				            	console.log("点击的菜单id："+id);
				            	
				            	if ("treeview-1014-record-1" === id) {
				            		console.log("点击的菜单：根菜单");
				            		
				            	} else if("treeview-1014-record-2" === id){
				            		console.log("点击的菜单：功能1");
				            		
				            	}else if("treeview-1014-record-3" === id){
				            		console.log("点击的菜单：功能2");
				            		
				            	}else if("treeview-1014-record-4" === id){
				            		console.log("点击的菜单：功能3");
				            		
				            	}else if("treeview-1014-record-5" === id){
				            		console.log("点击的菜单：功能2.1");
				            		
				            	}else if("treeview-1014-record-6" === id){
				            		console.log("点击的菜单：功能2.2");
				            		
				            	}
				            }
				        }
				    }
			        
			    },
			    //右边的面板
			    {
			        region: 'center',
			        xtype: 'tabpanel', // TabPanel本身没有title属性
			        activeTab: 0,      // 配置默认显示的激活面板
			        items: tabItem,
			    }
			  ]
			});
			
			});
			
		</script>
	</head>
	<body>
	</body>
</html>