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' 
});

 

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