Чтобы показать непрерывный ProgressBar с помощью ExtJS

Question

Проблема: - Мне нужно встроить индикатор выполнения, который будет работать непрерывно до завершения операции. ExtJS предоставляет Progressbar Ext.Progressbar , который будет: -
а) Выполнить непрерывно, используя wait method
б) Запустите после обновления updateProgress метод.

В обоих случаях результат работы индикатора выполнения будет

Решение, которое я пытаюсь найти:
Шаг 1:
Шаг 2:
Шаг 3:

Пожалуйста, предложите мне решение или подход. Используемая мной библиотека JavaScript - ExtJS. Заранее спасибо.

Ссылки Ссылка на пример: -
http://dev.sencha.com/deploy/dev/examples/simple-widgets/progress-bar.html

---

Answer 1

Ext.get('buttonID').on('click', function(){
    Ext.MessageBox.show({
       msg: 'Saving your data, please wait...',
       progressText: 'Saving...',
       width:300,
       wait:true,
       waitConfig: {interval:200},
       icon:'ext-mb-download', 
       animEl: 'buttonID'
   });
    setTimeout(function(){
        //This simulates a long-running operation like a database save or XHR call.
        //In real code, this would be in a callback function.
        Ext.MessageBox.hide();
        Ext.example.msg('Done', 'Your fake data was saved!');
    }, 8000);
});

Answer 2

Вот простой подход: вы можете создать анимированный Gif-файл с отображением индикатора непрерывной работы, который вы описали:

• динамически создайте элемент img с gif as src в начале вашей операции
• удалить элемент img по завершении

или если вы хотите отобразить пустой индикатор выполнения перед операцией и полный индикатор выполнения после завершения:

• включает элемент img с атрибутом src, указывающий на изображение пустого индикатора выполнения
• обновить img src для ссылки на анимированный gif
• обновить img src, указав в конце изображение полного индикатора выполнения

Answer 3

Другой подход с использованием JavaScript: вы можете анимировать левое поле цветного div (индикатор прогресса) внутри родительского div (индикатор выполнения), используя setTimeout или простую библиотеку анимации, такую ​​как emile.js

ExtJS также предоставляет дополнительную анимацию в установщиках класса Ext.Element:

• вы можете вызывать setX (x, animation) с необязательным аргументом animate для индикатора прогресса на каждом шаге
• или вставьте прозрачный элемент «толкатель» перед индикатором прогресса и вызовите setWidth (width, animate) для «толкателя», чтобы толкнуть индикатор прогресса вправо

В обоих случаях вы должны предоставить обратный вызов завершения в параметрах анимации для сброса анимации и цикла.

Answer 4

Я понимаю, что Ext JS использовал неопределенный индикатор выполнения более трех лет назад, в 0,4; однако из-за того, что браузеры могут останавливать анимированные GIF-файлы, они были удалены. Вы можете восстановить его с помощью стилей, как указано в этом сообщении на форуме - используйте что-то вроде Firebug, чтобы увидеть, что вы должны стиль.

Ссылка на форум