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