应该是Ext的bug,当给grid的宽度设为100%时,其宽度会变成10000px,高度设置为100%,其内容自适应,而不是根据其容器自适应。
无奈只能经过其高度宽度设置为固定值(很管用的)
这样不论页面宽度怎么变化grid都会自适应页面容器了。ide
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
}),orm
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);ip
store.load({params:{start:0, limit:10}});
//当窗口固定时触发的事件
window.onresize=function(){
grid.setWidth(document.body.clientWidth-10);
grid.setHeight(document.body.clientHeight-50);
};
});
it