extjs4中viewport高度不能100%

小弟现在在学生EXTJS，其中的VIEWPORT是我想要的效果。但无论我怎么调试，右边的center区域就是不能100%
代码如下，请各位大侠帮我看看吧。谢谢！！！！<%@ 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>
extjs4

解决方案 »

  1.   

    应该不在这段代码 在这代码的前面 改为 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <html xmlns="http://www.w3.org/1999/xhtml">即采用网页兼容或称ie怪异模式 你试试是否有效
    再就是这个参数加在Ext.tab.Panel的定义中  region: 'center',  flex:1,
      

  2.   

    这样修改就好了：
     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 ]//注意这里
     
                    });
                });   
     
      

  3.   

    如楼上所说，果然如此。谢谢 tabs ]//注意这里