Extjs 加载图标

Posted 2023-02-26

【中文标题】Extjs 加载图标

【英文标题】：Extjs Loading Icon

【发布时间】：2021-11-18 19:54:57

【问题描述】：

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

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

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

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

    ]

【参考方案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;

【讨论】：

我希望将此加载图标添加到表中的每一行。但由于某种原因，图标根本不显示。关于为什么会出现这种情况的任何想法？