分页工具栏页码显示异常求助：输入10仅显示个位数字0

这问题我之前帮同事排查过，一眼就看出是页码输入框宽度不够导致的！输入10时前面的“1”被输入框的宽度截断了，所以只显示后面的“0”，但因为输入框的实际值还是10，所以跳转功能能正常工作。

问题重现 #

你的配置里上下工具栏都用了pagingtoolbar，绑定了allinvoices store：

tbar : { xtype : 'pagingtoolbar', displayInfo : true, store : 'allinvoices' },
bbar : { xtype : 'pagingtoolbar', displayInfo : true, store : 'allinvoices' },
height : 650,
width : true

输入1-9时显示正常，输入10只显示个位0，跳转有效但显示不全。

核心原因 #

ExtJS默认的PagingToolbar页码输入框宽度是固定的（通常在25px左右），只能容纳一位数字，输入两位数时就会被水平截断，只显示右侧的数字。

解决方案 #

方案1：快速修复——CSS调整输入框宽度

这是最简单的方法，不需要修改JS代码，直接加自定义CSS：

/* 针对分页工具栏的输入框设置宽度 */
.x-paging-toolbar .x-form-field {
    width: 40px !important; /* 调整到能容纳2-3位数字的宽度，按需修改 */
}

如果是使用Sencha Cmd的主题定制，也可以在Sass文件里修改对应的变量：

$grid-paging-input-width: 40px;

方案2：自定义PagingToolbar的输入组件

如果需要更灵活的定制（比如调整输入框样式、增加验证），可以直接替换默认的页码输入项：

tbar: {
    xtype: 'pagingtoolbar',
    displayInfo: true,
    store: 'allinvoices',
    // 重写items，替换默认的页码输入框
    items: [
        '-', // 分隔符
        '跳转到:',
        {
            xtype: 'numberfield',
            itemId: 'pageInput',
            width: 45,
            minValue: 1,
            allowBlank: false,
            // 回车触发跳转
            listeners: {
                specialkey: function(field, e) {
                    if (e.getKey() === e.ENTER) {
                        var toolbar = field.up('pagingtoolbar');
                        // ExtJS的store页码是从0开始的，所以要减1
                        toolbar.doLoad(field.getValue() - 1);
                    }
                }
            }
        },
        `页 / 共 ${this.store.getTotalCount() / this.store.pageSize} 页`,
        '-',
        {
            text: '确认跳转',
            handler: function(btn) {
                var toolbar = btn.up('pagingtoolbar');
                var input = toolbar.down('#pageInput');
                if (input.isValid()) {
                    toolbar.doLoad(input.getValue() - 1);
                }
            }
        }
    ]
}

这种方式完全自定义了跳转区域的UI，能彻底解决显示问题，还能增加额外交互。

方案3：检查全局CSS冲突

有时候全局的.x-form-field样式会被其他自定义CSS覆盖，导致宽度被强制设置得很小。可以打开浏览器开发者工具，检查输入框的computed样式，看有没有其他规则限制了宽度，然后用更具体的选择器覆盖：

/* 更具体的选择器，确保优先级足够 */
.x-panel .x-paging-toolbar .x-form-text {
    width: 40px;
}

总结 #

优先用方案1快速解决，要是需要定制UI就用方案2，记得验证下不同屏幕尺寸下的显示效果，确保输入框宽度足够容纳最大页码数。

内容的提问来源于stack exchange，提问作者shyamal