应该是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 ,
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: '无记录'
})
});