PDA

View Full Version : [Ext 2.0] Scrollticker Extension



genix
10 Mar 2009, 4:31 PM
Hello,

I created an Scrollticker, because I needed it and didn't find a proper one for ExtJs.

Here is the Code:


function mpTicker(config){
this.tWidth = config.width || 145;
this.tHeight = config.height || 13;
this.tSpeed = config.speed || 3;
this.tElName = config.elName || 'ticker';
this.tPadding = config.elPadding || 10;
this.tOnOverlay = config.onlyOnOverlay || true;

this.cps = this.tSpeed;
this.right = this.left = false;

this.initTicker = function(){
this.el = Ext.get(this.tElName);
var tick = new Ext.Element(document.createElement('div'));
tick.setStyle({
'position': 'relative',
'width': this.tWidth + 'px',
'height': this.tHeight + 'px',
'overflow': 'hidden'
});

this.mq = new Ext.Element(document.createElement('div'));
this.mq.setStyle({
'position': 'absolute',
'left': this.tPadding,
'top': '0',
'white-space': 'nowrap'
});

tick.appendChild(this.mq);

var parent = this.el.parent();
parent.insertFirst(tick);
this.mq.insertFirst(this.el);

this.runner = new Ext.util.TaskRunner();
this.tickTask = {
scope: this,
run: function(){
this.scrollTicker();
},
interval: 100
}
}

this.scrollTicker = function(){
var val, mqLeft = this.mq.getLeft(true);
this.aw = this.el.dom.offsetWidth;

if(this.aw <= this.tWidth && this.tOnOverlay) return;

if(mqLeft < (-this.tPadding-(this.aw-this.tWidth))){
this.right = true;
this.left = false;
}
if(mqLeft > 0){
this.right = false;
this.left = true;
}
if(this.right){
val = mqLeft + this.cps;
} else if(left){
val = mqLeft - this.cps;
}
this.mq.setStyle('left', val);
}

this.start = function(){
this.runner.start(this.tickTask);
}

this.stop = function(){
this.runner.stop(this.tickTask);
}
}
You just have to create an Element in your dom, I always use 'span' and give the id over to the Ticker.

Example:


var exampleTicker = new mpTicker({
elName: 'tickertextid',
speed: 1,
elPadding: 1
});
exampleTicker.initTicker();
exampleTicker.start();
Hope you like it.

Greetings,
genix