Значок Загрузки Extjs

#svg #extjs #sencha-touch #loading #extjs4.2

Вопрос:

Я хочу получить значок загрузки, как показано ниже в Extjs. Я наткнулся на маску загрузки Extjs, но это не совсем то, что я ищу. Существуют ли какие-либо другие существующие компоненты, которые я мог бы использовать и, возможно, внести изменения, чтобы добиться такого поведения и внешнего вида? Если нет, то есть какие-либо предложения о том, как это можно было бы реализовать?

введите описание изображения здесь

Обновления: Я пытаюсь добавить значок для каждой строки в таблице, а ниже приведен код, который включен в качестве одного из элементов в списке ниже 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; } 

Комментарии:

1. Я хочу добавить этот значок загрузки в каждую строку таблицы. Но по какой-то причине значок просто не отображается вообще. Есть какие-нибудь идеи о том, почему это может быть так?