extjs 静态树形菜单布局

柔光的暖阳◎ 2022-02-17 03:32 309阅读 0赞

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

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWp1bm5h_size_16_color_FFFFFF_t_70]: /images/20220217/c2c5fe7a281041debdf03a763c6e9069.png