Ext Grid表格的自动宽度及高度的实现

希望Ext的表格能自适应外层的div大小，但Ext的Grid构造函数的width、height项不支持100%的设置方式，所以改用以下方式初始化Grid：

width: Ext.get("content").getWidth(),
height: Ext.get("content").getHeight(),

<div id="content">
    <div id="grid-example"></div>
<div>

#content {
width: 100%;
height: 100%;
}

完整js代码：

// create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'id',header: "序号", width: 50, sortable: true, renderer: keyChange, dataIndex: 'id'},
            {header: "数据表表名", width: 100, sortable: true, renderer: hrefChange, dataIndex: 'tableAlias'},
            {header: "物理表名", width: 100, sortable: true, dataIndex: 'tableName'},
            {header: "类型", width: 75, sortable: true, dataIndex: 'type'}
        ],
        stripeRows: true,
        width: Ext.get("content").getWidth(),
        height: Ext.get("content").getHeight(),
addClass:"grid",
tbar: [{
            text: '新增模版',
            handler : function(){
window.location.href = 'templateDefineList4.html';
            }
            },{
            text: '删除模版',
            handler : function(){

            }
        }],
        bbar: new Ext.PagingToolbar({
            pageSize: 15,
            store: store,
            displayInfo: true,
            displayMsg: '当前显示记录 {0} - {1} 总条数 {2}',
            emptyMsg: '无记录'
        })
    });

评论

10 楼 cnenhui 2012-11-13  

我也想要解决这个问题

9 楼 minglelui 2009-11-06  

我现在的需求是这样的：grid的行数十不断增加的，意味着高度也将不断的增高。
在控制高度方面不知道楼主可有更好的办法？

8 楼 ahead2010 2009-06-02  

很合适，为了这种效果试了好久

7 楼 phddcg 2009-01-15  

window.onresize = function(){
        grid.setWidth(0);
        grid.setHeight(0);
        grid.setWidth(Ext.get("content").getWidth());
        grid.setHeight(Ext.get("content").getHeight());
};

6 楼 zcsuntt 2008-11-27  

直接用fit布局不行吗？

5 楼 mikejia67 2008-11-19  

fine!Thanks.

4 楼 iampurse 2008-09-30  

这 可以么?

3 楼 Seraph115 2008-09-28  

是这样的，因为是在初始化时决定高度和宽度的，所以当窗口变化时大小不会改变，我也在找更好的解决办法

2 楼 peacock 2008-09-26  

当窗口变化的时候就会出问题

1 楼 dayone 2008-09-23