一个可收缩的tabpanel，展开时，个别panel的内容不能100%高度，看以下图点击左边展开区域（注意，不是点击展开按钮），再点击第二个或第三个TAB菜单，高度没有撑满，配置项中有写layout:"fit"，但是，如果是点击展开的按钮，确没有这种问题，不知道是不是EXTJS本身的BUG，不知道哪位高人能解决这个问题。以下是全部代码，可以存为HTML文件，打开看效果<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.4.0/resources/images/default/s.gif';Ext.MyWindow=Ext.extend(Ext.Window ,{
xtype:"window",
title:"我的窗口",
width:800,
height:488,
layout:"border",
initComponent: function(){
this.items=[
{
xtype:"panel",
title:"我的面板",
region:"center"
},
{
xtype:"tabpanel",
activeTab:0,
region:"west",
width:400,
split:false,
collapsible:true,
collapsed:true,
items:[
{
xtype:"panel",
title:"分页2",
layout:"form",
labelWidth:40,
items:[
{
xtype:"textfield",
fieldLabel:"标签",
anchor:"100%"
},
{
xtype:"textfield",
fieldLabel:"标签",
anchor:"100%"
},
{
xtype:"textarea",
fieldLabel:"标签",
anchor:"100%"
},
{
xtype:"textarea",
fieldLabel:"标签",
anchor:"100%"
}
]
},
{
xtype:"form",
title:"我的表单",
labelWidth:100,
labelAlign:"left",
layout:"fit",
items:[
{
xtype:"htmleditor",
anchor:"100%",
fieldLabel:"标签",
height:150,
width:300
}
]
},
{
xtype:"panel",
title:"我的面板",
layout:"fit",
items:[
{
xtype:"grid",
title:"我的表格",
store:{
xtype:"arraystore"
},
columns:[
{
header:"Column 1",
sortable:true,
resizable:true,
dataIndex:"data1",
width:100
},
{
header:"Column 2",
sortable:true,
resizable:true,
dataIndex:"data2",
width:100
},
{
header:"Column 3",
sortable:true,
resizable:true,
dataIndex:"data3",
width:100
}
]
}
]
}
]
}
]
Ext.MyWindow.superclass.initComponent.call(this);
}
})Ext.onReady(function() {
var win;
if(!win){
win = new Ext.MyWindow({
applyTo:'layout'
});
}
win.show(this);});
</script>
</head>
<body>
<div id="layout"></div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.4.0/resources/images/default/s.gif';Ext.MyWindow=Ext.extend(Ext.Window ,{
xtype:"window",
title:"我的窗口",
width:800,
height:488,
layout:"border",
initComponent: function(){
this.items=[
{
xtype:"panel",
title:"我的面板",
region:"center"
},
{
xtype:"tabpanel",
activeTab:0,
region:"west",
width:400,
split:false,
collapsible:true,
collapsed:true,
items:[
{
xtype:"panel",
title:"分页2",
layout:"form",
labelWidth:40,
items:[
{
xtype:"textfield",
fieldLabel:"标签",
anchor:"100%"
},
{
xtype:"textfield",
fieldLabel:"标签",
anchor:"100%"
},
{
xtype:"textarea",
fieldLabel:"标签",
anchor:"100%"
},
{
xtype:"textarea",
fieldLabel:"标签",
anchor:"100%"
}
]
},
{
xtype:"form",
title:"我的表单",
labelWidth:100,
labelAlign:"left",
layout:"fit",
items:[
{
xtype:"htmleditor",
anchor:"100%",
fieldLabel:"标签",
height:150,
width:300
}
]
},
{
xtype:"panel",
title:"我的面板",
layout:"fit",
items:[
{
xtype:"grid",
title:"我的表格",
store:{
xtype:"arraystore"
},
columns:[
{
header:"Column 1",
sortable:true,
resizable:true,
dataIndex:"data1",
width:100
},
{
header:"Column 2",
sortable:true,
resizable:true,
dataIndex:"data2",
width:100
},
{
header:"Column 3",
sortable:true,
resizable:true,
dataIndex:"data3",
width:100
}
]
}
]
}
]
}
]
Ext.MyWindow.superclass.initComponent.call(this);
}
})Ext.onReady(function() {
var win;
if(!win){
win = new Ext.MyWindow({
applyTo:'layout'
});
}
win.show(this);});
</script>
</head>
<body>
<div id="layout"></div>
</body>
</html>
3.4没用过不敢说，去官方论坛问问吧
第四个图，当expand的时候，collapse的那个按钮好似位置不太对
所以我给你换个方法
在tab的外面套了一个panel，
{
xtype: 'panel',
title: 'region west panel ',
region: "west",
width: 400,
split: false,
collapsible: true,
collapsed: true,
layout:'fit',
items:[tanpanel] //去掉region，width，collapse等信息
}
发现没问题
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.4.0/resources/images/default/s.gif'; Ext.MyWindow = Ext.extend(Ext.Window, {
xtype: "window",
title: "我的窗口",
width: 800,
height: 488,
layout: "border",
initComponent: function () {
this.items = [
{
xtype: "panel",
title: "我的面板",
region: "center"
},
{
xtype: 'panel',
title: 'region west panel',
region: "west",
width: 400,
split: false,
collapsible: true,
collapsed: true,
layout: 'fit',
items: [
{
xtype: "tabpanel",
activeTab: 0,
items: [
{
xtype: "panel",
title: "分页2",
layout: "form",
labelWidth: 40,
items: [
{
xtype: "textfield",
fieldLabel: "标签",
anchor: "100%"
},
{
xtype: "textfield",
fieldLabel: "标签",
anchor: "100%"
},
{
xtype: "textarea",
fieldLabel: "标签",
anchor: "100%"
},
{
xtype: "textarea",
fieldLabel: "标签",
anchor: "100%"
}
]
},
{
xtype: "form",
title: "我的表单",
labelWidth: 100,
labelAlign: "left",
layout: "fit",
items: [
{
xtype: "htmleditor",
anchor: "100%",
fieldLabel: "标签",
height: 150,
width: 300
}
]
},
{
xtype: "panel",
title: "我的面板",
layout: "fit",
items: [
{
xtype: "grid",
title: "我的表格",
store: {
xtype: "arraystore"
},
columns: [
{
header: "Column 1",
sortable: true,
resizable: true,
dataIndex: "data1",
width: 100
},
{
header: "Column 2",
sortable: true,
resizable: true,
dataIndex: "data2",
width: 100
},
{
header: "Column 3",
sortable: true,
resizable: true,
dataIndex: "data3",
width: 100
}
]
}
]
}
]
}
}
}
]
Ext.MyWindow.superclass.initComponent.call(this);
}
}) Ext.onReady(function () {
var win;
if (!win) {
win = new Ext.MyWindow({
applyTo: 'layout'
});
}
win.show(this);
});
</script>
</head>
<body>
<div id="layout">
</div>
</body>
</html>