ExtJS：解决Grid进度条提示框分页/筛选后失效及容器获取问题

方法一：使用Widget列（推荐） #

Widget列会在分页、筛选、排序后重新渲染每个单元格的组件，能完美解决afterrender仅触发一次的问题，同时可直接控制进度条的样式与提示框。

{
    text: '进度',
    dataIndex: 'progress',
    width: 200,
    xtype: 'widgetcolumn',
    widget: {
        xtype: 'progressbar',
        listeners: {
            afterrender: function(bar) {
                // 获取当前行数据
                const record = bar.up('gridcell').getRecord();
                const current = record.get('current'); // 替换为实际的当前完成数字段
                const total = record.get('total'); // 替换为实际的总任务数字段
                
                // 创建提示框
                Ext.create('Ext.tip.ToolTip', {
                    target: bar.el,
                    html: `Progress ${current} of ${total}`
                });
                
                // 进度值为1时添加样式类
                if (record.get('progress') === 1) {
                    bar.addCls('progress-complete');
                }
            }
        },
        // 绑定进度值到组件
        bind: {
            value: '{progress}'
        }
    }
}

注意：需确保Grid支持数据绑定，或在数据更新时Widget列能获取到最新的行记录。

方法二：Renderer + 全局提示框 #

若不想使用Widget列，可通过Renderer生成进度条HTML并添加自定义属性，再用全局提示框监听鼠标事件，同时完成样式类的添加。

1. 列配置的Renderer方法 #

{
    text: '进度',
    dataIndex: 'progress',
    width: 200,
    renderer: function(value, metaData, record) {
        const current = record.get('current');
        const total = record.get('total');
        
        // 给单元格添加自定义属性，用于提示框读取内容
        metaData.tdAttr = `data-tooltip="Progress ${current} of ${total}"`;
        
        // 进度值为1时给单元格添加样式类
        if (value === 1) {
            metaData.cls = 'progress-complete-cell';
        }
        
        // 返回进度条HTML结构
        return `<div class="x-progress x-progress-default" style="width:100%">
                    <div class="x-progress-bar x-progress-bar-default" style="width:${value * 100}%"></div>
                </div>`;
    }
}

2. 全局提示框初始化 #

在Grid加载完成后，创建全局提示框监听所有带data-tooltip属性的单元格：

Ext.create('Ext.tip.ToolTip', {
    target: 'your-grid-id', // 替换为你的Grid实例ID
    delegate: 'td[data-tooltip]',
    trackMouse: true,
    listeners: {
        beforeshow: function(tip) {
            tip.update(tip.triggerElement.getAttribute('data-tooltip'));
        }
    }
});

这种方式不依赖组件的afterrender事件，新渲染的单元格也能正常触发提示框。

补充说明 #

• progress-complete类的作用对象可根据需求调整：方法一是给进度条组件加类，方法二是给单元格加类。
• 代码中的字段名（如current、total）需替换为你实际业务中的数据字段。

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