ExtJS5: Custom component(ticker) increasing CPU cycles 10 times - extjs

Question

I am using a ticker component in my application. When the text is rolling, the CPU cycles hit 10+. As soon as I hover cursor over it, the scrolling stops and the CPU cycles comes down to 0
Can someone tell if this is normal? If not, how can I make this component use less CPU cycles?
Here is the code for ticker:
Ext.define('MyApp.ux.Ticker', {
extend: 'Ext.Component',
xtype: 'ticker',
baseCls: 'x-ticker',
autoEl: {
tag: 'div',
cls: 'x-ticker-wrap',
children: {
tag: 'div',
cls: 'x-ticker-body'
}
},
body: null,
constructor: function (config) {
Ext.applyIf(config, {
direction: 'left',
speed: 10,
pauseOnHover: true
});
if (config.speed < 1) config.speed = 1;
else if (config.speed > 20) config.speed = 20;
Ext.applyIf(config, {
refreshInterval: parseInt(10 / config.speed * 15)
});
config.unitIncrement = 1;
this.callParent([config]);
},
afterRender: function () {
this.body = this.el.first('.x-ticker-body');
this.body.addCls(this.direction);
this.taskCfg = {
interval: this.refreshInterval,
scope: this
};
var posInfo, body = this.body;
switch (this.direction) {
case "left":
case "right":
posInfo = { left: body.getWidth() };
this.taskCfg.run = this.scroll.horz;
break;
case "up":
case "down":
posInfo = { top: body.getHeight() };
this.taskCfg.run = this.scroll.vert;
break;
}
posInfo.position = 'relative';
body.setPositioning(posInfo);
DHT.ux.Ticker.superclass.afterRender.call(this);
if (this.pauseOnHover) {
this.el.on('mouseover', this.onMouseOver, this);
this.el.on('mouseout', this.onMouseOut, this);
this.el.on('click', this.onMouseClick, this);
}
this.task = Ext.apply({}, this.taskCfg);
Ext.util.TaskManager.start(this.task);
},
add: function (o) {
var dom = Ext.DomHelper.createDom(o);
this.body.appendChild(Ext.fly(dom).addCls('x-ticker-item').addCls(this.direction));
},
onDestroy: function () {
if (this.task) {
Ext.util.TaskManager.stop(this.task);
}
DHT.ux.Ticker.superclass.onDestroy.call(this);
},
onMouseOver: function () {
if (this.task) {
Ext.util.TaskManager.stop(this.task);
delete this.task;
}
},
onMouseClick: function (e, t, o) {
var item = Ext.fly(t).up('.x-ticker-item');
if (item) {
this.fireEvent('itemclick', item, e, t, o);
}
},
onMouseOut: function () {
if (!this.task) {
this.task = Ext.apply({}, this.taskCfg);
Ext.util.TaskManager.start(this.task);
}
},
scroll: {
horz: function () {
var body = this.body;
var bodyLeft = body.getLeft(true);
if (this.direction == 'left') {
var bodyWidth = body.getWidth();
if (bodyLeft <= -bodyWidth) {
bodyLeft = this.el.getWidth(true);
} else {
bodyLeft -= this.unitIncrement;
}
} else {
var elWidth = this.el.getWidth(true);
if (bodyLeft >= elWidth) {
bodyLeft = -body.getWidth(true);
} else {
bodyLeft += this.unitIncrement;
}
}
body.setLeft(bodyLeft);
},
vert: function () {
var body = this.body;
var bodyTop = body.getTop(true);
if (this.direction == 'up') {
var bodyHeight = body.getHeight(true);
if (bodyTop <= -bodyHeight) {
bodyTop = this.el.getHeight(true);
} else {
bodyTop -= this.unitIncrement;
}
} else {
var elHeight = this.el.getHeight(true);
if (bodyTop >= elHeight) {
bodyTop = -body.getHeight(true);
} else {
bodyTop += this.unitIncrement;
}
}
body.setTop(bodyTop);
}
}
});
And this is how I am using it:
{
xtype: 'panel',
border: false,
height: 40,
width: 256,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
width: 200,
direction: 'left',
xtype: 'ticker',
itemId: 'rollerPanel'
}],
listeners: {
afterrender: function (panel) {
var ticker = panel.down('ticker');
ticker.add({
tag: 'div',
cls: 'title',
html: "Ticker content."
});
}
}
}
What's wrong with the above code? What may be the reason for higher CPU usage?

Answer 1

The Chrome developer tools will help you profile this but it wouldn't hurt to cache some of the things like the width/height of the body and elements so that you're only reading it when you start up and not on every tick.