Code:
Ext.define('TM.chart.RectSprite', {
extend: 'Ext.fx.target.CompositeSprite',
alternateClassName : 'RectSprite',
titleFont : '500 {0} "Times New Roman",Georgia,Serif',
subFont : 'normal 12px Arial',
title : 'Title',
subTitle : 'Sub Title',
opacity : 1,
xcoord : 10,
ycoord : 10,
showTextAfter: false,
textColor: '#000000',
statics : {
textThreshold: 5,
clickFn: Ext.emptyFn,
splitText : function (txt, width,pw) {
pw = pw || 5;
var hidden = false;
var w = txt.length * pw;
var ltxt = txt;
if (width < w) {
var c = txt.split(' ');
var p = Math.floor(c.length / 2);
if (p > 0) {
c.splice(p, 0, '\r\n');
}
var text = c.join(' ');
txt = text.replace(' \r\n ', '\r\n');
var l = 0;
c = txt.split('\r\n');
Ext.each(c,function(item){
if(item.length > l){
l = item.length;
ltxt =item;
}
});
}
hidden = RectSprite.isHidden(width,ltxt,pw);
return [txt,hidden];
},
isHidden : function(width,txt,pw){
return ((pw * txt.length) > width);
},
/**
* Calculates the css font size, splits the text with line breaks if required
* and whether the text should be hidden or not.
* @param {Number} width The width of the sprite to contain the text
* @param {Number} config The height of the sprite to contain the text
* @param {String} str Font string containing '{0}' which will be replaced with the calculated font size
* @param {String} txt Text to be displayed
* @return {Array} returns Array containing the font string, text to display and whether the text should be hidden or not
*/
getFont : function (width, height, str, txt) {
//calculater rough font size in px
var f = Math.floor((width - 50) / 10);
var l = txt.length;
//check for maximum font size
f = ((l < 16) && (f > this.textThreshold)) ? 25 : f;
f = f > 25 ? 25 : f;
f = f < 15 ? 15 : f;
f = ((height < 100) && (f > 15)) ? 15 : f;
var items = this.splitText(txt, width,7);
return [str.replace('{0}', f + "px"), items[0],items[1]];
},
stopEvents : false,
setOpacity : function (cmp, op, speed, callback) {
var duration = speed || 500;
var config = {
to : {
opacity : op
},
duration : duration
};
if (callback) {
config.callback = callback;
}
return cmp.animate(config);
},
fadeOutFn : function (cmp) {
if (!this.stopEvents) {
this.setOpacity(cmp, 0.2);
}
},
fadeInFn : function (cmp) {
if (!this.stopEvents) {
this.setOpacity(cmp, 1);
}
}
},
constructor : function (config) {
var that = this;
that.callParent([config]);
var xOff = 10;
var yOff = 20;
var xStart = that.initX || that.xcoord;
var yStart = that.initY || that.ycoord;
that.moveX = that.xcoord - xStart;
that.moveY = that.ycoord - yStart;
that.recSprite = Ext.create('Ext.draw.Sprite', {
type : 'rect',
width : that.width,
height : that.height,
x : xStart,
y : yStart,
opacity : that.opacity,
startFill : '#00AA4B',
fill : that.fill,
costs : that.costs || 0,
stroke : '#FFFFCC',
"stroke-opacity" : 1,
"stroke-width" : 1
//surface : drawComponent.surface
});
var fontCalc = that.self.getFont(that.width, that.height, that.titleFont, that.title);
var hideText = fontCalc[2];
var hidden = hideText;
var fontStr = fontCalc[0];
var titleTxt = fontCalc[1];
var subCalc = that.self.splitText(that.subTitle,that.width,7);
var subText = subCalc[0];
if(subCalc[1]){
hideText = true;
hidden = hideText;
}
if (that.showTextAfter){
xStart = that.xcoord;
yStart = that.ycoord;
hidden = true;
}
that.titleMain = Ext.create('Ext.draw.Sprite', {
type : 'text',
"text-anchor" : "left",
"text": ExtFormatNumberToCurrentLocale(titleTxt),
font: fontStr,
//style:'fill:'+that.textColor,
fill : that.textColor,
opacity : that.opacity,
x : xStart + xOff,
y : yStart + yOff,
hidden : hidden,
hideText: hideText,
zIndex : 100,
surface : that.surface
});
//that.titleMain.setStyle('fill', that.textColor);
//that.recSprite.relayEvents(titleMain,['mouseover','mouseout','click']);
that.titleMain.clearListeners();
that.titleMain.show(true);
var bbox = that.titleMain.getBBox();
//that.titleMain.setStyle('fill', that.textColor);
that.titleSub = Ext.create('Ext.draw.Sprite', {
type : 'text',
"text-anchor" : "left",
"text" : subText,
font: that.subFont,
//style: 'fill:' + that.textColor,
fill : that.textColor,
opacity : that.opacity,
x : xStart + xOff,
y : bbox.y + bbox.height + 10,
hidden : hidden,
hideText: hideText,
zIndex : 100
});
//that.recSprite.relayEvents(titleSub,['mouseover','mouseout','click']);
that.add(that.recSprite);
that.add(that.titleMain);
that.add(that.titleSub);
that.each(function (item) {
that.surface.add(item);
});
},
moveIn : function (duration, easing) {
this.moveBy(this.moveX, this.moveY, duration, easing);
},
moveBy : function (x, y, duration, easing) {
var that = this;
var config = {
duration : duration || 2000,
easing : easing || 'ease'
};
if (!that.showTextAfter) {
that.each(function (item) {
config.to = {
x : item.x + x,
y : item.y + y,
opacity : 1
};
item.animate(config);
});
} else {
var item = that.recSprite;
var config2 = Ext.clone(config);
config2.to = {
x : item.x + x,
y : item.y + y,
opacity : 1
}
item.animate(config2);
}
},
showText: function () {
var that = this;
if (that.items[1]. hideText === false){
RectSprite.setOpacity(that.titleMain.show(true),1,1000);
RectSprite.setOpacity(that.titleSub.show(true),1,1000);
}
}
});
Reply With Quote
