ExtJS Animate Counter от 0 до N

Question

У меня есть простой элемент Ext.Panel с номером:

{
    cls: 'tableRightBorder',
    html: '<p class="someValue" onload="animateCounter()">20</p>',
    //border: '1px solid',
    width: '100%',
    height: '100%'
}

И я хочу сделать анимацию от 0 до 20 в этом случае.Я пробовал с событием onload и этой функцией:

function animateCounter() {
    var i = 0;

    var inv = setInterval(function() {
        if (i < 100)
            document.getElementsByClassName('someValue').innerHTML = ++i;
        else
            clearInterval(inv);
    }, 3000 / 100);
}

Но это не работает.Может кто-нибудь сказать мне, пожалуйста, почему это не работает и как я могу решить это?

Answer 1

Вы можете найти полный рабочий пример Extjs Fiddle Counter Animation

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: 'Listeners',
            width: 400,
            height: 300,
            items: [{
                cls: 'tableRightBorder',
                html: '<p class="subscribersValue" onload="animateCounter()">1</p>',
                width: '100%',
                id: 'myCmpId',
                height: '100%'
            }],
            listeners: {
                render: function () {
                    var i = 0;
                    var inv = setInterval(function () {
                        if (i < 20)
                            Ext.fly('myCmpId').dom.innerHTML = ++i;
                        else
                            clearInterval(inv);
                    }, 3000 / 100);
                }
            }
        })
    }
});

Answer 2

У объектов ExtJS есть свойство listeners, в котором вы можете передавать события с помощью функций.Например:

{
    cls: 'tableRightBorder',
    html: '<p class="subscribersValue" onload="animateCounter()">20</p>',
    width: '100%',
    height: '100%',
    listeners: {
        onclick: () => {
            var i = 0;

            var inv = setInterval(function () {
                if (i < 100)
                    document.getElementsByClassName('subscribersValue').innerHTML = ++i;
                else
                    clearInterval(inv);
            }, 3000 / 100);
        }
    }
}

Конечно, для этого компонента есть событие, эквивалентное загрузке.Может быть, пострендер?