Ext的Grid自适应问题解决方案

1.Ext的Grid自适应问题解决方案

标签：extheaderpluginsfunction

2012-01-17 22:03 658人阅读评论(0) 收藏举报

分类：

extjs（45）

应该是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);

};

});