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对象具有“侦听器”属性，您可以在其中传递带有函数的事件。例如：

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

此组件肯定有一个等效的onload事件。也许后屈？

Answer 2

您可以找到完整的工作示例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);
                }
            }
        })
    }
});

ExtJS动画计数器从0到N

2 个答案: