Extjs 加载图标

Question

我希望在 Extjs 中获得如下所示的加载图标。我遇到了 Extjs loadMask，但它并不是我想要的。是否有任何其他现有组件可供我使用并可能对其进行更改以实现此行为和外观？如果没有，关于如何实施的任何建议？

更新：我正在尝试为表格中的每一行添加图标，下面是包含在this.columns 下列表中的项目之一的代码。但是，行上不会显示任何内容。我错过了什么吗？

{
    xtype: 'actioncolumn',
    sortable:false,
    menuDisabled:true,
    width:50,
    hidden:false,

    items: [{
      xtype:'component',
      cls:'spinner-circular', 
      height:50

    }]
}

Answer 1

我们制作了自己的组件来显示 loadicon 如下：

就这么简单：

{
        xtype: 'component',
        cls: 'spinner-circular',
        height: 50
    }

css 是：

@keyframes spinner-circular {
  to {transform: rotate(360deg);}
}

.spinner-circular:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 1px solid #ccc;
  border-top-color: #f48b31;
  animation: spinner-circular .6s linear infinite;
}