ExtJs实践（5）——解决在GridPanel中使用bbar或者tbar的分页条的宽度自适应问题

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

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的事件，只要浏览器尺寸改变，就会触发该事件：

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层，比如：

<div id="gridEnterprise"></div> 

<div id="pager"></div>

然后修改脚本：

var pager = new Ext.PagingToolbar({ 

    pageSize: 5, 

    store: store, 

    displayInfo: true, 

    displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', 

    emptyMsg: "没有记录", 

    renderTo: 'pager' 

});

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