extjs4.2点击树形菜单生成tab页并访问发送请求

extjs4.2点击树形菜单生成tab页并访问发送请求

• 博客分类： 
• java
• extjs

java javascript extjs

 以下是全部代码，使用的是extjs4.2.1,，代码复制即可使用： 

 

 

Js代码  

1. Ext.onReady(panelLayout);  
2.   
3. function panelLayout() {  
4.                 //新建tabpanel  
5.     var tab = Ext.create('Ext.TabPanel', {  
6.         region : 'center',  
7.         deferredRender : false,  
8.         activeTab : 0,  
9.         resizeTabs : true, // turn on tab resizing  
10.         minTabWidth : 115,  
11.         tabWidth : 135,  
12.         enableTabScroll : true  
13.     });  
14.     var viewPort = Ext.create('Ext.Viewport', {  
15.         layout : "border",  
16.         items : [ {  
17.             region : 'north',  
18.             minHeight : 100,  
19.             html : 'north'  
20.         }, {  
21.             title : 'West Region is collapsible',  
22.             region : 'west',  
23.             xtype : 'panel',  
24.             width : 200,  
25.             collapsible : true, // 设置可折叠  
26.             id : 'west-region-container',  
27.             layout : 'fit',  
28.             margins : '0 0 0 0',  
29.             layout : 'accordion',  
30.             title : '菜单',  
31.             split : true,  
32.             collapsible : true,  
33.             layoutConfig : {  
34.                 animate : true  
35.             },       
36.             items : [{  
37.                         title : '业务信息处理',  
38.                         xtype : 'treepanel',  
39.                         expanded : true,  
40.                         animate : true,  
41.                         enableDD : false,  
42.                         border : false,  
43.                         containerScroll : true,  
44.                         root : {  
45.                             text : '..',  
46.                             id:'root',  
47.                             children : [{  
48.                                 text : '业务信息',  
49.                                 id : 'bussinessInfo_gotoBusinessInfo.do',  
50.                                 leaf : true  
51.                             }, {  
52.                                 text : '组织管理',  
53.                                 leaf : true,  
54.                                 id :'dept_list.jsp'  
55.                             }]  
56.                         },  
57.             listeners:{  
58.     //添加节点点击事件  itemclick: function(v,r,item){  
59.                     var n = tab.getComponent(r.raw.id);  
60.                      if(r.raw.id=='root'){  
61.                         return;  
62.                      }  
63.                                         if (!n) { // 判断是否已经打开该面板  
64.                                             n = tab.add({  
65.                                                 'id' : r.raw.id,  
66.                                                 'title' : r.raw.text,  
67.                                                  closable : true, // 通过html载入目标页  
68.                                                  html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+r.raw.id+'"></iframe>'  
69.                                             });  
70.                                         }  
71.                                     tab.setActiveTab(n);  
72.                              }   
73.             }  
74.                     }, {  
75.                         title : '信息中心',  
76.                         border : false,  
77.                         html : '<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'  
78.                     }, {  
79.                         title : '系统设置',  
80.                         border : false,  
81.                         html : '<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'  
82.                     }]  
83.         },tab, {  
84.             region : 'south',  
85.             minHeight : 25,  
86.             html:"<div align='center'>版权所有 xxxx有限公司 © 信息服务中心</div>"  
87.         } ]  
88.     })  
89.   
90. }  

 

• 
• 大小: 123.2 KB

分享到：   

extjs 4.2 分页，根据查询条件分页 |  模拟post请求抓取网页资源数据，用正则表达 ...

• 2014-05-10 12:01
• 浏览 4027
• 评论(1)
• 论坛回复 / 浏览 (2 / 3150)
• 分类:编程语言
• 相关推荐

参考知识库

Java SE知识库 11728  关注 | 450  收录

Java Web知识库 12315  关注 | 1157  收录

Java EE知识库 3765  关注 | 616  收录

JavaScript知识库 3927  关注 | 1024  收录

评论

1 楼  u010995675 2015-08-27  

大神请问下itemclick: function(v,r,item){  
                    var n = tab.getComponent(r.raw.id);  中的v，r,item是什么意思啊？还有r.raw.id怎么获取的id呢？谢谢