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

本文探讨了在GridPanel中利用bbar或tbar实现分页功能时遇到的宽度无法自适应浏览器尺寸的问题。通过分析源代码和框架内部逻辑,提出了在使用分页时增加额外的分页DIV层的方法来解决这一问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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


 

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

使用ExtJS进行开发时,确保GridPanel正确显示数据是关键。当遇到在特定浏览器如Firefox开启或关闭Firebug插件后GridPanel显示正常,而直接运行时却不显示数据的情况,可以尝试以下步骤进行排查和解决问题: 参考资源链接:[ExtJS Grid数据加载后不显示的解决方法](https://wenku.youkuaiyun.com/doc/7ukrxv2r6h?spm=1055.2569.3001.10343) 1. **检查布局刷新**:在添加Grid到TabPanel后,调用父容器的`doLayout()`方法,确保布局正确更新。例如,在添加Grid的代码段之后添加`parentContainer.doLayout();`。 2. **检查可见性**:确认Grid或其父容器没有被意外设置为隐藏。通过检查`gridpanel.hidden`属性确保其为`false`。 3. **检查尺寸设置**:确保Grid的尺寸被正确设置或者其父容器有足够的空间。可以通过CSS强制指定宽度和高度,或使用`flex`布局确保自动适应。 4. **调整渲染策略**:如果使用了延迟渲染,尝试将`autoRender`属性设置为`true`,确保Grid在尺寸确定后立即渲染。 5. **审查事件监听逻辑**:检查事件监听器的唯一性和正确性,确保没有逻辑错误或不必要的重复代码,这可能会导致渲染或显示问题。 6. **执行跨浏览器测试**:虽然在Firefox和Internet Explorer中没有报错,仍需在不同浏览器中测试以排除兼容性问题。 通过上述方法,你可以系统地排查和解决GridPanel显示问题。同时,推荐查看《ExtJS Grid数据加载后不显示的解决方法》这份资料,它详细介绍了相关问题解决方案,帮助开发者更好地理解和运用ExtJS进行开发。 参考资源链接:[ExtJS Grid数据加载后不显示的解决方法](https://wenku.youkuaiyun.com/doc/7ukrxv2r6h?spm=1055.2569.3001.10343)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值