extjs tree TabPanel 布局问题

0 0

extjs tree TabPanel 布局问题5

用extjs中的Tree+TabPanel进行布局时，遇到一个问题，当点击左边菜单面板中的伸缩按钮，把菜单面板隐藏时，右边的TabPanel的宽度不能自动调整。代码如下。

var rootNode = new Ext.tree.AsyncTreeNode({
id : "0",
text : "管理菜单"
});

var loader = new Ext.tree.TreeLoader({
dataUrl : 'treeMenuLoadAction.action',// 请求地址
baseParams : {
params : id
}
});

var treeMenu = new Ext.tree.TreePanel({
root : rootNode,
animate : true, // 开启动画效果
enableDD : false, // 不允许子节点拖动
border : false, // 没有边框
singleClickExpand : true,
loader : loader,
listeners : {
beforeclick : synb,
click : sync,
expandnode : checkUserSession
}
});
treeMenu.getRootNode().expand();

var treePanel = new Ext.Panel({
region : 'west',
renderTo : 'treeDiv',
split : true,
width : 200,
autoScroll : true,
bodyStyle:'overflow-x:hidden;',
layout : 'form',
collapseMode : 'mini',
border : true,
layoutConfig : {
titleCollapse : false,
animate : true,
activeOnTop : false,
collapsible : true
},
tbar : [{
iconCls : 'icon-expand-all',
text : '展开',
tooltip : '展开所有节点',
handler : function() {
treeMenu.expandAll();
},
scope : this
}, '-', {
iconCls : 'icon-collapse-all',
text : '收缩',
tooltip : '收缩所有节点',
handler : function() {
treeMenu.collapseAll();
},
scope : this
}],
items : [treeMenu]
});
var maintabpanel = new Ext.TabPanel({
id : 'doc-body',
region : 'center',
margins : '0 5 5 0',
resizeTabs : true,
minTabWidth : 135,
tabWidth : 135,
plugins : new Ext.ux.TabCloseMenu(),
enableTabScroll : true,
layoutOnTabChange : true,
activeTab : 0,
frame : true,
tabMargin : 5,
monitorResize: true,
items : {
id : 'welcome-panel',
title : '我的办公室',
tabTip : '我的办公室',
iconCls : 'icon-home',
html : '<iframe width="100%" height="100%" frameborder=0 src="'
+ getHostUrl() + getURLPath() + '/view/main/queryMyOfficeInfo.action"></iframe>',
autoScroll : true
}
});

var viewport = new Ext.Viewport({
layout : 'border',
items : [{
cls : 'docs-header',
height : 55,
region : 'north',
xtype : 'box',
el : 'header',
border : false,
margins : '0 0 5 0'
}, treePanel, maintabpanel]
});

viewport.doLayout();

function synb(node, e) {
return node.isLeaf();
}
function sync(node, e) {
if (node.isLeaf()) {
e.stopEvent();
var n = maintabpanel.getComponent(node.id);
var iconCls = "icon-form";
if (!n) {
var n = maintabpanel.add({
id : node.id,
title : node.text,
tabTip : node.text,
iconCls : iconCls,
closable : true,
html : '<iframe width="100%" height="100%" frameborder=0 src="'
+ node.attributes.href + '"></iframe>'
});
}
maintabpanel.setActiveTab(n);
}
}

在网上找了很多方法，都不好用，请大家帮忙看看，不胜感谢。。