extjs4中viewport高度不能100%
小弟现在在学生EXTJS，其中的VIEWPORT是我想要的效果。但无论我怎么调试，右边的center区域就是不能100%
代码如下，请各位大侠帮我看看吧。谢谢！！！！
extjs4
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String ctxpath = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>简易书籍管理系统EXT版</title>
<link rel="stylesheet" type="text/css"
href="js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext/bootstrap.js"></script>
<script type="text/javascript" src="js/ext/locale/ext-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
var ctxpath = '<%=ctxpath%>';
Ext.onReady(function() {
var tabs = Ext
.create(
'Ext.tab.Panel',
{
frame : true,
autoHeight : true,
activeTab : 0,//默认激活第一个tab页
renderTo : Ext.getBody(),
layout : 'border',
items : [
{
title : 'tab标签页1',
html : '<iframe scrolling="auto" frameborder="0" width="100%" src="http://www.csdn.net" height="100%"></iframe>'
}, {
title : 'tab标签页1',
html : 'dfsfds'
} ]
});
//tabs.items.items[0].loader.load();
//创建菜单数据模型
Ext.regModel('Menu', {
fields : [ 'text', 'url' ]
});
//创建菜单树数据源
var menuStore = Ext.create('Ext.data.TreeStore', {
model : 'Menu',
proxy : {
type : 'memory',
data : [ {
text : '书籍类型维护',
leaf : true,
url : '5-12.html',
id : '01'
}, {
text : '书籍维护',
leaf : true,
url : '',
id : '02'
}, {
text : 'firstjack',
leaf : true,
url : '',
id : '03'
} ]
},
root : {
text : '系统说明',
url : '',
leaf : false,
expanded : true
}
});
//切换内容页面
function changePage(url, title, id) {
n = tabs
.add({
'id' : id,
'title' : title,
closable : true,
layout : 'border',
autoScroll : true,
html : '<iframe id="tree'
+ id
+ '" scrolling="auto" frameborder="0" width="100%" height="100%" src="'
+ url + '"></iframe>'
});
tabs.setActiveTab(n);
}
//创建菜单树
var menuTree = Ext.create('Ext.tree.Panel', {
border : false,
store : menuStore,
hrefTarget : 'mainContent',
listeners : {
itemclick : function(view, rec, item, index, e) {
changePage(rec.get('url'), rec.get('text'), rec
.get('id'));
}
}
});
Ext.create('Ext.container.Viewport', {
layout : 'border',//Border布局
items : [ {
html : 'logo',
region : 'north'//指定子面板所在区域为north
}, {
title : '功能菜单',
items : menuTree,
split : true,
collapsible : true,
region : 'west',//指定子面板所在区域为west
width : 180
}, {
items : [ tabs ],
id : 'mainContent',
region : 'center'//指定子面板所在区域为center
} ]
});
});
</script>
<body>
</body>
</html>
[解决办法]
这样修改就好了：
Ext.onReady(function() {
var tabs = Ext
.create(
'Ext.tab.Panel',
{
region : 'center',//注意这里
frame : true,
autoHeight : true,
activeTab : 0,//默认激活第一个tab页
renderTo : Ext.getBody(),
layout : 'border',
items : [
{
title : 'tab标签页1',
html : '<iframe scrolling="auto" frameborder="0" width="100%" src="http://www.csdn.net" height="100%"></iframe>'
}, {
title : 'tab标签页1',
html : 'dfsfds'
} ]
});
//tabs.items.items[0].loader.load();
//创建菜单数据模型
Ext.regModel('Menu', {
fields : [ 'text', 'url' ]
});
//创建菜单树数据源
var menuStore = Ext.create('Ext.data.TreeStore', {
model : 'Menu',
proxy : {
type : 'memory',
data : [ {
text : '书籍类型维护',
leaf : true,
url : '5-12.html',
id : '01'
}, {
text : '书籍维护',
leaf : true,
url : '',
id : '02'
}, {
text : 'firstjack',
leaf : true,
url : '',
id : '03'
} ]
},
root : {
text : '系统说明',
url : '',
leaf : false,
expanded : true
}
});
//切换内容页面
function changePage(url, title, id) {
n = tabs
.add({
'id' : id,
'title' : title,
closable : true,
layout : 'border',
autoScroll : true,
html : '<iframe id="tree'
+ id
+ '" scrolling="auto" frameborder="0" width="100%" height="100%" src="'
+ url + '"></iframe>'
});
tabs.setActiveTab(n);
}
//创建菜单树
var menuTree = Ext.create('Ext.tree.Panel', {
border : false,
store : menuStore,
hrefTarget : 'mainContent',
listeners : {
itemclick : function(view, rec, item, index, e) {
changePage(rec.get('url'), rec.get('text'), rec
.get('id'));
}
}
});
Ext.create('Ext.container.Viewport', {
layout : 'border',//Border布局
items : [ {
html : 'logo',
region : 'north'//指定子面板所在区域为north
}, {
title : '功能菜单',
items : menuTree,
split : true,
collapsible : true,
region : 'west',//指定子面板所在区域为west
width : 180
}, tabs ]//注意这里
});
});