grid的宽度设为100%问题

应该是Ext的bug,当给grid的宽度设为100%时,其宽度会变成10000px,高度设置为100%,其内容自适应,而不是根据其容器自适应。
无奈只能通过其高度宽度设置为固定值(很管用的)
这样不论页面宽度怎么变化grid都会自适应页面容器了。

js代码如下:
   // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", sortable: true, dataIndex: 'company'},
            {header: "Price", sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        frame:true,
        plugins: new Ext.ux.PanelResizer({
            minHeight: 100
        }),

        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
            plugins: new Ext.ux.ProgressBarPager()
        })
    });

    grid.render('grid-example');
    grid.setWidth(document.body.clientWidth-10);
    grid.setHeight(document.body.clientHeight-50);

    store.load({params:{start:0, limit:10}});
    //当窗口固定时触发的事件
    window.onresize=function(){
        grid.setWidth(document.body.clientWidth-10);
        grid.setHeight(document.body.clientHeight-50);
    };
});
 

 

=====================

望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: '无记录'
        })
    });

posted @ 2012-06-26 10:14  holyes  阅读(1449)  评论(0编辑  收藏  举报