`

EXT JS 静态树

 
阅读更多
第一:使用代码模式
new Ext.tree.AsyncTreeNode({
		    id:'root',
		    text:'根节点',
		    children:[
		     {
		      text:'个人管理',
		      children:[
		       {text:'修改资料',leaf:true},
		       {text:'审核操作',leaf:true}
		      ]
		     },{
		      text:'系统管理',
		      children:[
		       {text:'用户管理',url:'page/system/dataDictionary.jsp' ,leaf:true},
		       {text:'角色管理',leaf:true} 
		       {text:'分类管理',leaf:true} 
		       {text:'卡片管理',leaf:true} 
		       {text:'汇总审核',leaf:true} 
		       {text:'公告管理',leaf:true 
		       
		     }, 
		      text:'综合信息' 
		      children: 
		       {text:'销售统计',leaf:true} 
		       {text:'浏览投诉',leaf:true 
		       
		      
		     
		   });

第二:使用对象模式
var root1 = new Ext.tree.TreeNode({
            text:'管理系统',
          //  checked:true,
            url:'about.jsp'
        });

		var node1 = new Ext.tree.TreeNode({
              text:'系统管理',
			   // icon: './../../images/2324.png',
              url:'#'
   
              
        });
        
        var node2 = new Ext.tree.TreeNode({
              text:'档口管理',
			 // icon: './../../images/map.png',
              url:'#'
        });


		var node3 = new Ext.tree.TreeNode({
              text:'货物管理',
			 // icon: './../../images/chinaz2.png',
              url:'#'
        });


	
        
        	
		var node4 = new Ext.tree.TreeNode({
              text:'短信管理',
			 // icon: './../../images/messag.png',
              url:'showSystemUsersList.action'
        });		
        
        var node5 = new Ext.tree.TreeNode({
              text:'报表',
			 // icon: './../../images/Chart.png',
              url:'showSystemUsersList.action'
        });		
        
        
        //-----二级菜单begin
//         var node101 = new Ext.tree.TreeNode({
//               text:'系统用户',
// 			 // icon: './../../images/user.png',
//               url:'userlist.action'   
//         });
        
        var node102 = new Ext.tree.TreeNode({
              text:'数据字典',
			 // icon: './../../images/setting.png',
              url:'page/system/dataDictionary.jsp'     
        });
        var node103 = new Ext.tree.TreeNode({
              text:'员工录入管理',
			 // icon: './../../images/note.png',
              url:'page/system/userEnterInfo.jsp'
        });
        var node104 = new Ext.tree.TreeNode({
            text:'员工工作时间',
			 // icon: './../../images/chinaz6.png',
            url:'page/system/userWorkTime.jsp'
      	});	
		var node105 = new Ext.tree.TreeNode({
              text:'用户管理',
			 // icon: './../../images/chinaz5.png',
              url:'page/system/userList.jsp'
        });	
        var node106 = new Ext.tree.TreeNode({
              text:'权限列表',
			 // icon: './../../images/chinaz1.png',
              url:'page/system/roleList.jsp'
        });
     
        
        
        
        
        var node107 = new Ext.tree.TreeNode({
              text:'基础档口',
			 // icon: './../../images/chinaz10.jpg',
              url:'showShopList.action'
        });		
        
        var node108 = new Ext.tree.TreeNode({
              text:'供应商',
			 // icon: './../../images/chinaz11.jpg',
              url:'showShopUserList.action'
        });	
  
         var node109 = new Ext.tree.TreeNode({
              text:'档口用户',
			 // icon: './../../images/contacts.png',
              url:'showShopInUserList.action'
        });
        
         var node110 = new Ext.tree.TreeNode({
              text:'档口费用',
			 // icon: './../../images/Coin256.png',
              url:'showSystemUsersList.action'
        });	 
         var node111 = new Ext.tree.TreeNode({
             text:'档口费用',
			 // icon: './../../images/Coin256.png',
             url:'showSystemUsersList.action'
       });	
         var node112 = new Ext.tree.TreeNode({
             text:'档口费用',
			 // icon: './../../images/Coin256.png',
             url:'showSystemUsersList.action'
       });	
         var node113 = new Ext.tree.TreeNode({
             text:'档口费用',
			 // icon: './../../images/Coin256.png',
             url:'showSystemUsersList.action'
       });	
         var node114 = new Ext.tree.TreeNode({
             text:'档口费用',
			 // icon: './../../images/Coin256.png',
             url:'showSystemUsersList.action'
       });
         var node115 = new Ext.tree.TreeNode({
             text:'档口费用',
			 // icon: './../../images/Coin256.png',
             url:'showSystemUsersList.action'
       });	
         var node116 = new Ext.tree.TreeNode({
             text:'档口费用',
			 // icon: './../../images/Coin256.png',
             url:'showSystemUsersList.action'
       });	
         var node117 = new Ext.tree.TreeNode({
             text:'档口费用',
			 // icon: './../../images/Coin256.png',
             url:'showSystemUsersList.action'
       });	
         var node118 = new Ext.tree.TreeNode({
             text:'档口费用',
			 // icon: './../../images/Coin256.png',
             url:'showSystemUsersList.action'
       });	
         var node119 = new Ext.tree.TreeNode({
             text:'档口费用',
			 // icon: './../../images/Coin256.png',
             url:'showSystemUsersList.action'
       });	
        //-----二级菜单end
         
         	
        root.appendChild(node1);
        root.appendChild(node2);
		root.appendChild(node3);
		root.appendChild(node4);
		root.appendChild(node5);

		
		
		//-----二级菜单begin
// 		node1.appendChild(node101);
		node1.appendChild(node102);
		node1.appendChild(node103);
		node1.appendChild(node104);
		node1.appendChild(node105);
		node1.appendChild(node106);
		
		node2.appendChild(node107);
		node2.appendChild(node108);
		node2.appendChild(node109);
		node2.appendChild(node110);
				
		

	    //-----二级菜单end
	    
		var menu = new Ext.tree.TreePanel({
			  
			rootVisible:false,     //隐藏根节点 
            border:true,          //边框 
            animate:true,         //动画效果 
            autoScroll:true,      //自动滚动 
            enableDD:false,       //拖拽节点              
            containerScroll:true, 
            autoScroll:true,
            height:750,         
			root:root,
		
			listeners: {
				click:function(node,e){
					//父级菜单点击就返回
					if(node.attributes.url=="#"){
						return;
					}
					gotoTabPage(node.attributes.url,node.text);
               
				
				},//end click func
				load:function(node,e){
					
				}//end load func
			}//end listeners
	 });
		menu.setRootNode(root); 
分享到:
评论

相关推荐

    EXT dojochina Ext类静态方法.rar

    EXT dojochina Ext类静态方法是一个关于EXT框架在JavaScript中的使用的主题,主要聚焦于Ext类的静态方法。EXT是一个强大的前端开发框架,由Sencha公司开发,它提供了丰富的组件库,用于构建复杂的Web应用程序。在EXT...

    利用Ext来实现的静态树(一次加载所有节点的树)

    利用Ext实现静态树(一次加载所有节点的树) 在今天的IT行业中,树形结构是一种非常常见的数据结构,尤其是在Web应用程序中。在这种情况下,我们通常会遇到一个问题,即如何将树形结构的数据加载到前台,以便用户...

    静态ext树

    "静态ext树"是一种在计算机科学,特别是编程和数据结构领域中的概念,它通常与JavaScript框架Ext JS相关。Ext JS是一个用于构建用户界面的开源...通过实践和研究源码,开发者可以掌握创建和定制静态树形结构的能力。

    EXT实现动态树的功能

    EXT是一个流行的JavaScript库,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库,其中包括用于创建交互式树形视图的组件。在EXT中实现动态树的功能是一项常见的需求,特别是对于那些需要展示层次结构数据...

    ext js中文开发手册

    EXT JS是一种基于JavaScript的开源框架,专为Web应用程序的界面开发而设计。它提供了一套丰富的UI组件,支持复杂的用户交互,并简化了AJAX交互的实现过程。通过EXT JS,开发者可以轻松构建具有高度响应性和用户友好...

    Ext Js jar包

    3. **资源文件**:可能包含CSS样式表、图片和其他静态资源,这些是Ext JS组件正常显示所必需的。 4. **文档和示例**:可能包含API文档、教程和示例代码,帮助开发者理解和使用库。 5. **构建脚本和配置文件**:可能...

    Ext JS 4.0编码规范

    - `/dir/to/js/extjs/ext-4.0.x/resources`:Ext JS 默认的静态资源文件。 - `/dir/to/js/extjs/ext-4.0.x/src`:Ext JS 源代码,供 `ext.js` 和 `ext-debug.js` 动态加载使用。 - `/dir/to/js/extjs/ext-4.0.x/...

    Ext JS实例 学生信息管理系统

    Ext JS是一种基于JavaScript的前端开发框架,用于构建富交互式的Web应用程序。它提供了一系列丰富的组件,包括表格、面板、窗口、菜单等,使得开发者能够轻松地创建功能强大的用户界面。在"Ext JS实例 学生信息管理...

    springMVC整合ext4js

    Spring MVC作为Java后端的主要MVC框架,提供了强大的控制层支持,而Ext4JS则是一个流行的JavaScript库,用于构建富客户端应用。通过整合这两者,我们可以构建出具有高效数据管理和用户友好的界面的Web应用。 首先,...

    Ext表格控件和树控件

    ### Ext表格控件和树控件 #### 表格控件 ##### 1.1 基本表格 `GridPanel` 在Ext JS框架中,`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示...

    Ext Js权威指南(.zip.001

    4.3 ext js的静态方法 / 112 4.3.1 概述 / 112 4.3.2 ext.object中的静态方法 / 113 4.3.3 ext.function中的静态方法 / 120 4.3.4 ext.array中的静态方法 / 127 4.3.5 ext.error中的静态方法 / 133 4.4 深入...

    Ext js的部署

    Ext JS是一个流行的JavaScript库,用于构建富客户端的Web应用程序。它提供了丰富的UI组件和强大的数据管理功能,使开发者能够创建功能强大的交互式用户界面。 在部署Ext JS应用时,有几个关键步骤需要注意: 1. **...

    仿EXT风格JS.rar

    - **组件化**:EXT JS的核心是其组件系统,允许开发者构建各种UI元素,如表格、表单、树形视图等,这些组件可以组合起来形成复杂的用户界面。 - **响应式设计**:EXT JS支持多种屏幕尺寸和设备,提供了一套完整的...

    Ext Js行业管理系统elevator.rar

    Ext Js提供了大量的可重用组件,如表格、树、面板、表单等,以及复杂的布局管理,帮助开发者快速创建复杂的用户界面。 2. **自定义组件和类**: 开发者可能会根据需求创建自己的组件或扩展已有的Ext Js类,以实现...

    EXT4实现的经典系统静态例子

    这个"EXT4实现的经典系统静态例子"提供了一个EXTJS4的实现示例,EXTJS是一个强大的JavaScript库,主要用于构建富客户端的Web应用程序。让我们深入探讨EXTJS4和EXT4的相关知识点。 1. **EXTJS4**: - **概述**:...

    ext TREE

    EXT JS是一个强大的JavaScript用户界面库,用于构建富客户端应用。Tree组件是EXT JS中的一个重要部分,它允许开发者创建可交互的树形结构,通常用于展示层次关系的数据,如文件系统、组织结构或数据库层次结构。 ...

    ext+ssh树,带右键功能

    【标题】"ext+ssh树,带右键功能"指的是在Web应用开发中,结合EXTJS(EXT)和Struts2(SSH)框架构建的一种特殊交互界面,它包含了一个能够展示层级结构数据的树形组件,并且具备了右键菜单功能。EXTJS是一款强大的...

    Ext JS 7.6 开发介绍与API

    Ext JS 提供了大量的预定义组件,如按钮、表格、树形视图、图表等,这些组件都具有高度可定制性。开发者可以通过配置选项和事件来调整组件的行为,甚至可以通过继承和扩展基础组件来自定义新组件。 5. **数据绑定*...

Global site tag (gtag.js) - Google Analytics