如何实现无刷新展示SFTP上传状态？当前需刷新页面查看

方案1：定时轮询后端接口（简单易实现） #

在你的Grid组件初始化逻辑中添加定时任务，每隔一段时间查询未完成任务的最新状态，更新到Store中即可自动触发视图刷新：

initComponent: function() {
    this.callParent(arguments);
    var store = this.getStore();
    
    // 每隔5秒轮询一次可根据业务调整间隔
    this.statusPoller = setInterval(function() {
        // 只查询处于处理中的任务，减少无效请求
        var pendingRecords = store.queryBy(record => record.get('sftpStatus') === 'Processing');
        if (pendingRecords.getCount() === 0) {
            clearInterval(this.statusPoller);
            return;
        }
        
        // 收集需要查询的任务ID假设你的任务数据有唯一ID字段
        var taskIds = pendingRecords.collect('id');
        
        // 调用后端接口获取最新状态
        Ext.Ajax.request({
            url: '/api/sftp/upload/status', // 替换为你的后端接口地址
            method: 'POST',
            params: {
                taskIds: Ext.encode(taskIds)
            },
            success: function(response) {
                var result = Ext.decode(response.responseText);
                // 遍历更新对应记录的状态
                Ext.each(result.statusList, function(statusItem) {
                    var record = store.getById(statusItem.taskId);
                    if (record && record.get('sftpStatus') !== statusItem.status) {
                        record.set('sftpStatus', statusItem.status);
                    }
                });
            },
            failure: () => console.error('获取SFTP上传状态失败')
        });
    }.bind(this), 5000);
},

// 组件销毁时清理轮询任务
destroy: function() {
    if (this.statusPoller) clearInterval(this.statusPoller);
    this.callParent(arguments);
}

方案2：WebSocket实时推送（实时性更强） #

如果后端支持WebSocket，可实现状态变更即时推送，无需轮询：

initComponent: function() {
    this.callParent(arguments);
    var store = this.getStore();
    
    // 建立WebSocket连接替换为你的后端WebSocket地址
    var ws = new WebSocket('ws://your-domain.com/api/sftp/status/ws');
    
    ws.onopen = function() {
        // 订阅当前用户的任务状态推送
        var taskIds = store.collect('id');
        ws.send(JSON.stringify({action: 'subscribe', taskIds: taskIds}));
    };
    
    ws.onmessage = function(event) {
        var statusUpdate = JSON.parse(event.data);
        var record = store.getById(statusUpdate.taskId);
        if (record) record.set('sftpStatus', statusUpdate.status);
    };
    
    ws.onerror = error => console.error('WebSocket连接错误:', error);
    ws.onclose = () => {
        // 连接断开后自动重连可选
        setTimeout(() => this.initComponent(), 3000);
    };
    
    this.wsConnection = ws;
},

destroy: function() {
    if (this.wsConnection) this.wsConnection.close();
    this.callParent(arguments);
}

视图自动更新的原理 #

你当前的actioncolumn通过getClass方法根据record的sftpStatus返回对应图标类，ExtJS的Record对象在调用set方法修改字段时，会自动触发数据变更事件，Grid会监听这些事件并重新渲染对应列，因此无需手动刷新页面，只要更新记录状态就能同步更新视图。

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