以下是全部代码,使用的是extjs4.2.1,,代码复制即可使用:
- Ext.onReady(panelLayout);
- function panelLayout() {
- //新建tabpanel
- var tab = Ext.create('Ext.TabPanel', {
- region : 'center',
- deferredRender : false,
- activeTab : 0,
- resizeTabs : true, // turn on tab resizing
- minTabWidth : 115,
- tabWidth : 135,
- enableTabScroll : true
- });
- var viewPort = Ext.create('Ext.Viewport', {
- layout : "border",
- items : [ {
- region : 'north',
- minHeight : 100,
- html : 'north'
- }, {
- title : 'West Region is collapsible',
- region : 'west',
- xtype : 'panel',
- width : 200,
- collapsible : true, // 设置可折叠
- id : 'west-region-container',
- layout : 'fit',
- margins : '0 0 0 0',
- layout : 'accordion',
- title : '菜单',
- split : true,
- collapsible : true,
- layoutConfig : {
- animate : true
- },
- items : [{
- title : '业务信息处理',
- xtype : 'treepanel',
- expanded : true,
- animate : true,
- enableDD : false,
- border : false,
- containerScroll : true,
- root : {
- text : '..',
- id:'root',
- children : [{
- text : '业务信息',
- id : 'bussinessInfo_gotoBusinessInfo.do',
- leaf : true
- }, {
- text : '组织管理',
- leaf : true,
- id :'dept_list.jsp'
- }]
- },
- listeners:{
- //添加节点点击事件 itemclick: function(v,r,item){
- var n = tab.getComponent(r.raw.id);
- if(r.raw.id=='root'){
- return;
- }
- if (!n) { // 判断是否已经打开该面板
- n = tab.add({
- 'id' : r.raw.id,
- 'title' : r.raw.text,
- closable : true, // 通过html载入目标页
- html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+r.raw.id+'"></iframe>'
- });
- }
- tab.setActiveTab(n);
- }
- }
- }, {
- title : '信息中心',
- border : false,
- html : '<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'
- }, {
- title : '系统设置',
- border : false,
- html : '<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'
- }]
- },tab, {
- region : 'south',
- minHeight : 25,
- html:"<div align='center'>版权所有 xxxx有限公司 © 信息服务中心</div>"
- } ]
- })
- }
评论
1 楼
u010995675 2015-08-27
大神请问下itemclick: function(v,r,item){
var n = tab.getComponent(r.raw.id); 中的v,r,item是什么意思啊?还有r.raw.id怎么获取的id呢?谢谢
var n = tab.getComponent(r.raw.id); 中的v,r,item是什么意思啊?还有r.raw.id怎么获取的id呢?谢谢
参考知识库