Extjs自定义加载图标实现及表格行内加载图标不显示问题咨询

组件选型说明 #

ExtJS 没有自带符合你需求的环形加载图标内置组件，最适配的实现方式是自定义轻量组件结合CSS动效，相比修改LoadMask、ProgressBar等原有组件成本更低，适配表格行内场景的灵活度更高。 #

你当前代码不显示的核心原因 #

actioncolumn的设计定位是仅支持轻量的图标点击配置，不支持嵌套任意普通Ext组件，你在items里写的xtype: component配置不会被actioncolumn的渲染逻辑处理，所以没有内容输出。 #

正确实现步骤 #

1. 先定义加载动效的CSS样式 #

/* 环形加载动画样式，可自行调整尺寸、颜色、速度 */
.spinner-circular {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-left-color: #2196F3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

2. 表格列配置选以下两种方案之一即可 #

方案1：轻量展示场景用templatecolumn

适合仅需要控制显示/隐藏，没有复杂交互的场景：

{
    xtype: 'templatecolumn',
    sortable: false,
    menuDisabled: true,
    width: 50,
    // 用行数据的isLoading字段控制加载图标显隐，可自行修改字段名
    tpl: '<tpl if="isLoading"><div class="spinner-circular" style="width:24px;height:24px;"></div></tpl>'
}

方案2：需要组件级交互用widgetcolumn

适合需要绑定事件、动态更新属性的场景：

{
    xtype: 'widgetcolumn',
    sortable: false,
    menuDisabled: true,
    width: 50,
    widget: {
        xtype: 'component',
        cls: 'spinner-circular',
        width: 24,
        height: 24
    },
    // 行数据更新时同步加载状态
    onWidgetAttach: function(col, widget, record) {
        widget.setVisible(record.get('isLoading'));
    }
}

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