ExtJs 解决在GridPanel中使用bbar或者tbar的分页条的宽度自适应问题

在GridPanel中利用bbar或者tbar来完成分页功能，是个很常见的做法，但是这里发现一个问题，就是宽度不能够自适应。首先我们看下这样的源代码：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ 
-->var store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({ url: main_domain + page._handlers['enterprise'] + 'getList' }),
//proxy: new Ext.data.HttpProxy({ url: page._handlers['enterprise'] + 'getList' }),
reader: new Ext.data.JsonReader({
totalProperty: 'TotalProperty',
root: 'List'
}, [
{ name: 'Id' },
{ name: 'Code' },
{ name: 'Name' },
{ name: 'CreateTime' }
])
//sortInfo: { field: "Name", direction: "ASC" }
});
store.load({ params: { start: 0, limit: 5} });
var selModel = new Ext.grid.CheckboxSelectionModel();
var grid = new Ext.grid.GridPanel({
renderTo: 'gridEnterprise',
stripeRows: true, // 斑马线效果
//width:'100%',
autoHeight: true,
autoWidth: true,
loadMask: true,
//            frame: true,
//            autoExpandColumn: 'Id',
//            columnLines: true,
store: store,
selModel: selModel,
columns: [
new Ext.grid.RowNumberer(),
selModel,
{ header: '编号', dataIndex: 'Id', sortable: true },
{ header: 'Code', dataIndex: 'Code', sortable: true },
{ header: '企业名称', dataIndex: 'Name', sortable: true },
{ header: '开户日期', dataIndex: 'CreateTime', sortable: true }
],
viewConfig: {
enableRowBody: true
//forceFit: true
}
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
});

 

其中可以看到bbar作为底部工具栏，显示分页工具条。运行中代码。



发现底部没有随着浏览器尺寸的拖动而自适应。

这个问题今天被纠结了很久~先后用width:100%或者CSS去调整样式，都失败了。后来在Ext.all.debug.js的框架中找到一个onResize的事件，只要浏览器尺寸改变，就会触发该事件：

代码

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ 
-->onResize: function (adjWidth, adjHeight, rawWidth, rawHeight) {
var w = adjWidth,
h = adjHeight;
if (Ext.isDefined(w) || Ext.isDefined(h)) {
if (!this.collapsed) {
if (Ext.isNumber(w)) {
this.body.setWidth(w = this.adjustBodyWidth(w - this.getFrameWidth()));
} else if (w == 'auto') {
w = this.body.setWidth('auto').dom.offsetWidth;
} else {
w = this.body.dom.offsetWidth;
}
if (this.tbar) {
this.tbar.setWidth(w);
if (this.topToolbar) {
this.topToolbar.setSize(w);
}
}
if (this.bbar) {
this.bbar.setWidth(w);
if (this.bottomToolbar) {
this.bottomToolbar.setSize(w);
if (Ext.isIE) {
this.bbar.setStyle('position', 'static');
this.bbar.setStyle('position', '');
}
}
}
…
}

 

如果包含bbar或者tbar的话，就会重新设置浏览器调整过的宽度。于是，我把红色的部分注释掉，得到了解决。

 

     但是，我不想去修改Ext.all.debug.js的代码。因此，我建议在使用分页的时候，可以考虑多加一个分页的DIV层，比如：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ 
--><div id="gridEnterprise"></div>
<div id="pager"></div>

 

然后修改脚本：

代码

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ 
-->var pager = new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录",
renderTo: 'pager'
});

 

这样问题也可以得到解决。