應該是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