ExtJS 动画计数器从 0 到 N

Question

我有一个简单的Ext.Panel项目，带有数字：

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

在这种情况下，我想制作从 0 到 20 的动画。我已经尝试过加载事件和这个函数：

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 对象有一个 "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);
        }
    }
}

当然，此组件有一个加载等效事件。也许是后渲染？

Answer 2

您可以找到完整的工作示例 Extjs 小提琴计数器动画

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);
                }
            }
        })
    }
});