sarabjeetd
18 Jun 2012, 11:18 AM
Ext.Loader.setConfig({enabled:true});
Ext.require(['*']);
Ext.onReady(function(){
/**
* @class extjs4core.view.Test3
*
* One stacked bar chart Test with time data
*
*/
Ext.define('Test3', {
extend:'Ext.container.Container',
alias:"widget.test3",
padding:'0 0 0 0',
autoScroll:true,
layout:{type:'vbox', align:'stretch'},
initComponent:function () {
Ext.define('TestTime', {
extend:'Ext.data.Model',
fields:[
{name:'time', type:'date', dateFormat:'d-m-Y H:i:s'},
'value',
'value1'
]
});
var testTimeStore1 = Ext.create('Ext.data.Store', {
model:'TestTime',
data:[
{time:"08-04-2012 08:00:00", value:2, value1:12},
{time:"08-04-2012 09:00:00", value:1, value1:6},
{time:"08-04-2012 10:00:00", value:7, value1:5},
{time:"08-04-2012 11:00:00", value:6, value1:6},
{time:"08-04-2012 12:00:00", value:1, value1:1},
{time:"08-04-2012 13:00:00", value:6, value1:4},
{time:"08-04-2012 14:00:00", value:1, value1:1},
{time:"08-04-2012 15:00:00", value:5, value1:1},
{time:"08-04-2012 16:00:00", value:12, value1:2},
{time:"08-04-2012 17:00:00", value:1, value1:12}
]
});
var chart1 = Ext.create("widget.e4chart", {
slider: {
master: true
},
id:"chart1",
flex:1,
height:500,
shadow:true,
store:testTimeStore1,
legend:{
position:'right'
},
animate:false,
mask:'horizontal',
axes:[
{
type:'Numeric',
minimum:0,
maximum:12,
position:'left',
fields:['value', 'value1'],
title:'Y something'
},
{
type:'Time',
position:'bottom',
fields:['time'],
title:'X something',
dateFormat:"H:i:s",
step:[Ext.Date.HOUR, 1]
}
],
series:[
{
//fake series which just shows the fill..
type:'area',
stacked: true,
axis:['left', 'bottom'],
fill:true,
xField:'time',
yField:['value', 'value1']
}
]
});
Ext.apply(this, {
items:[
{
xtype:'container',
layout:{type:'hbox', align:'stretch'},
items:[
chart1
]
},
{
xtype:'e4chartmslider',
margin:'10 20 10 20',
charts:[
chart1
],
rangeStyle:{
fill:undefined,
radius:4,
opacity:1
}
}
]
});
this.callParent(arguments);
}
});
/**
* @class extjs4core.components.chart.MultiSlider
* Multi-Slider component, enables zooming over a given Charts(e4chart) components.
*
* @cfg {Array} charts
* Set the charts references to be attached to the Slider.
*
* @cfg {String} dateFormat
* Set the dateFormat (in case the chart axis is of 'Time' format)
*
* @cfg {Number} [increment=1]
* Set the slider increment value
*
* @cfg {Object} [rangeStyle={type:'rect', radius:2, fill:'#c1c1c1', stroke:'#c0c0c0', 'stroke-width':1, opacity:.5}]
* Set the Range Sprite style
*
* @cfg [ticksPos={x: 3, y: 20}]
* The offset of the range ticks labels.
*
* @cfg {Number} [stepTickLabel=1]
* Set the steps for the labels display
*
*/
Ext.define("MultiSlider", {
extend:'Ext.slider.Multi',
alias:'widget.e4chartmslider',
require:["Utils"],
layout:{type:'auto'},
height:50,
width:"100%",
initComponent:function () {
var me = this;
_init();
if (me.rangeStyle) {
me._rangeStyle = Ext.merge(me._rangeStyle, me.rangeStyle);
}
me._destroy = false;
me._charts = me.charts;
me._draw = false;
me._dateFormat = (me.dateFormat || undefined);
me._increment = (me.increment || 1);
me._stepTickLabel = (me.stepTickLabel || 1);
me._ticksPos = ( me.ticksPos || (me._dateFormat ? {
x:18,
y:21
} : undefined) );
me.on("afterrender", me.afterRenderSlider);
// Call super;
this.callParent(arguments);
if (me._charts) {
if (!me.hasMasterChart()) {
console.log('Warning: No master chart was found, the slider is set to be invisible. Declare one chart as a "master" chart');
me.setVisible(false);
}
}
function _init() {
// Axis/Chart Type Enum
me._typeEnum = {
TIME:"Time",
NUMERIC:"Numeric"
};
// Default Style for the Range Slider Sprite
me._rangeStyle = {
type:'rect',
radius:2,
fill:'#c1c1c1',
stroke:'#c0c0c0',
'stroke-width':1,
opacity:.5
};
// Default configuration for the Range Slider
me._rangConf = {
height:26
};
// Offset factor for the Range Slider dimensions
me._rangeWidthFactor = 10;
// Flag to indicate that new data was loaded
me._onbeforerefresh = false;
}
},
/**
* Pass the tip text to the slider's thumbs tip
*
* @param thumb The passed thumb
*/
tipText:function (thumb) {
var owner = thumb.ownerCt, labels = (owner ? owner._labels : undefined);
return (labels ? labels[thumb.value] : "");
},
/**
* Draws the slider range data
*
* @param sliderArg
*/
drawSlider:function (sliderArg) {
var me = sliderArg,
sliderId = sliderArg.getId();
me.minValue = 0;
me.maxValue = me._labels.length - 1;
if (me.thumbs.length === 1) {
// initial load, add a thumb
me.addThumb(me._labels[this.maxValue]);
} else {
// on dynamic data load, remove the thumb
me.thumbs[1].destroy();
me.thumbs[1].el.remove();
me.thumbs.splice(1,1);
// add a new thumb
me.addThumb(me._labels[this.maxValue]);
me.setValue(0, me._minVal, true);
}
me._rangeComp = Ext.create('widget.e4chartrange', {
id:("range-" + sliderId + "-innerEl"),
ticksPos:me._ticksPos,
increment:me._increment,
stepTickLabel:me._stepTickLabel,
labels:me._labels,
height:me._rangConf.height,
width:"100%",
padding:'0, 10, 0, 0',
layout:'fit',
renderTo:Ext.get(sliderId + "-innerEl"),
dateFormat:me._dateFormat,
rangeStyle:me._rangeStyle
});
},
/**
* Clean the range data from the slider
*/
cleanSlider:function () {
var me = this;
me._draw = false;
me._rangeComp.el.remove();
},
/**
* Sync the chart according to the slider thumbs values
*
*/
changeSlider:function () {
var me = this,
rangeComp = me._rangeComp,
rangeSpriteComp = rangeComp._sprite,
sliderLowValue = me.getValue(0),
sliderHighValue = me.getValue(1),
ticksHandle = rangeComp._ticks,
tickHighPos = ticksHandle.getTickPos(sliderHighValue),
tickLowPos = ticksHandle.getTickPos(sliderLowValue),
tickPosRange = tickHighPos - tickLowPos;
rangeSpriteComp.setAttributes({
width:tickPosRange,
height:me._rangConf.height,
translate:{
x:(tickLowPos),
y:4
}
}, true);
var charts = me._charts,
chartsSize = (charts ? charts.length : 0),
chartIdx = 0, chartItem, chartAxis,
maxVal, minVal, chartAxisType, isAxisReset = false;
for (; chartIdx < chartsSize; chartIdx++) {
chartItem = charts[chartIdx];
if (chartItem) {
chartAxis = Utils.getAxisByPosition(chartItem, chartItem.getSliderAxis());
if (chartAxis) {
minVal = chartItem._minVal;
chartAxisType = chartAxis.type;
maxVal = chartItem._maxVal;
isAxisReset = me.setChartAxis(chartAxis, chartItem._minVal, chartItem._maxVal, {
chartItem:chartItem,
"Time":{key1:"toDate", key2:"fromDate" },
"Numeric":{key1:"maximum", key2:"minimum" }
});
if (isAxisReset) {
chartItem.redraw(true);
isAxisReset = false;
}
me.setChartAxis(chartAxis, sliderLowValue, sliderHighValue);
chartItem.redraw(true);
}
}
}
},
/**
* Resize the slider's range data
*
*/
resizeSlider:function () {
var me = this,
rangeComp = (me ? me._rangeComp : undefined),
adjWidth = me.getWidth(),
adjHeight = me.getHeight(),
ticks = (rangeComp ? rangeComp._ticks : undefined);
if (me && ticks) {
rangeComp.setSize(adjWidth, adjHeight);
ticks.resize(rangeComp.surface, {x:0, y:0, width:adjWidth - me._rangeWidthFactor, height:adjHeight});
me.changeSlider();
}
},
/**
* Verify that there's at least one master chart.
*/
hasMasterChart:function () {
var me = this,
chartsSize,
chartItem;
if (me._charts) {
chartsSize = me._charts.length;
while (chartsSize--) {
chartItem = me._charts[chartsSize];
if (chartItem && chartItem.isSliderMaster()) {
return true;
}
}
}
return false;
},
/**
* After the slider was rendered, setup the slider.
*
* @param sliderArg
*/
afterRenderSlider:function (sliderArg) {
var me = sliderArg,
sliderAxis, chartItem, chartItems, chartsSize;
if (me._charts) {
chartItems = me._charts;
chartsSize = chartItems.length;
while (chartsSize--) {
chartItem = chartItems[chartsSize];
if (chartItem) {
sliderAxis = chartItem.getSliderAxis();
if (!sliderAxis) {
Ext.log(" Missing slider's axis declaration. (e.g. 'bottom') ");
}
chartItemListener(chartItem, sliderAxis);
function chartItemListener(chartItem, sliderAxis) {
chartItem.on("beforerefresh", function () {
var sliderLowValue,
sliderHighValue,
chartValues;
// In case of reloading the master chart data, redraw the slider.
if (chartItem.isSliderMaster()) {
me._onbeforerefresh = true;
me.cleanSlider();
var chartAxis = Utils.getAxisByPosition(chartItem, sliderAxis);
if (chartAxis) {
delete chartAxis.maximum;
delete chartAxis.minimum;
delete chartAxis.fromDate;
delete chartAxis.toDate;
// Get the original data from the store. For some unknown reason the chart has issue to be updated with the new data.
chartValues = getChartMinMaxValues(chartItem, chartAxis);
if (chartValues) {
sliderLowValue = chartValues.min;
sliderHighValue = chartValues.max;
}
me.setChartAxis(chartAxis, sliderLowValue, sliderHighValue, {});
me.removeSliderListeners();
}
}
function getChartMinMaxValues(chartItem, chartAxis) {
var chartStore,
chartItems,
chartMinData,
chartMaxData,
fieldName;
if (chartItem && chartAxis) {
chartStore = chartItem.store;
fieldName = chartAxis.fields[0];
if (chartStore) {
chartItems = chartStore.data.items;
if (chartItems) {
chartMinData = chartItems[0].data;
chartMaxData = chartItems[chartItems.length - 1].data;
if (chartMaxData && chartMinData) {
return {
max:chartMaxData[fieldName],
min:chartMinData[fieldName]
}
}
}
}
}
return null;
}
});
chartItem.on("redraw", function (bool, chartArg) {
var chartAxisType,
chartAxis,
chartItemLabels,
isAxisLoaded = false;
if (me._onbeforerefresh) {
isAxisLoaded = Utils.isAxisLoaded(chartItem, sliderAxis);
me._onbeforerefresh = false;
} else {
isAxisLoaded = true;
}
chartAxis = Utils.getAxisByPosition(chartArg, sliderAxis);
if (chartAxis && !me._draw && isAxisLoaded) {
_defauls();
chartItemLabels = chartAxis.labels;
if (chartItemLabels) {
chartItem._minVal = chartItemLabels[0];
chartItem._maxVal = chartItemLabels[chartItemLabels.length - 1];
me.values=[me._minVal, me._maxVal];
me._chartMasterAxis = chartAxis;
me._labels = me._chartMasterAxis.labels;
}
if (chartItem.isSliderMaster()) {
me._chartMaster = chartItem;
me._chartMasterAxis = chartAxis;
chartAxisType = me._chartMasterAxis.type;
if (chartAxisType && chartAxisType == me._typeEnum.TIME) {
me._dateFormat = me._chartMasterAxis.dateFormat;
}
me._labels = me._chartMasterAxis.labels;
me.drawSlider(me);
me._draw = true;
me.addSliderListeners();
me.fireEvent("resize");
}
}
function _defauls() {
chartAxis.constrain = true;
}
});
}
}
}
}
},
addSliderListeners: function() {
var me = this;
me.on("change", me.changeSlider);
me.on("resize", me.resizeSlider);
},
removeSliderListeners: function() {
var me = this;
me.un("change", me.changeSlider);
me.un("resize", me.resizeSlider);
},
/**
* Update the chart axis minimum and maximum range values.
*
* @param chartAxis The chart axis object
* @param sliderLowValue The slider low value relatively to its labels
* @param sliderHighValue The slider high value relatively to its labels
*/
setChartAxis:function (chartAxis, sliderLowValue, sliderHighValue, isAxisReset) {
var me = this,
chartAxisType = chartAxis.type,
bool = false,
timeData, numericData;
if (chartAxisType == me._typeEnum.TIME) {
if (isAxisReset) {
timeData = isAxisReset[me._typeEnum.TIME];
if (timeData) {
bool = (chartAxis[timeData.key1] <= isAxisReset.chartItem._maxVal || chartAxis[timeData.key2] >= isAxisReset.chartItem._minVal);
}
}
chartAxis.fromDate = (isAxisReset ? sliderLowValue : chartAxis.labels[sliderLowValue]);
chartAxis.toDate = (isAxisReset ? sliderHighValue : chartAxis.labels[sliderHighValue]);
} else if (chartAxisType == me._typeEnum.NUMERIC) {
if (isAxisReset) {
numericData = isAxisReset[me._typeEnum.NUMERIC];
if (numericData) {
bool = (chartAxis[numericData.key1] <= isAxisReset.chartItem._maxVal || chartAxis[numericData.key2] >= isAxisReset.chartItem._minVal);
}
}
chartAxis.minimum = (isAxisReset ? sliderLowValue : chartAxis.labels[sliderLowValue]);
chartAxis.maximum = (isAxisReset ? sliderHighValue : chartAxis.labels[sliderHighValue]);
}
return bool;
}
});
/**
* @class extjs4core.components.chart.Chart
* Chart component with slider range support for data zooming in and out.
*
* @cfg {object} [slider={master:false, axis:'bottom'}]
* Set the chart as a master chart [true/false] and its axis range position ['left'/'bottom']
*
*/
Ext.define("Chart", {
extend:'Ext.chart.Chart',
alias: 'widget.e4chart',
require:["Utils"],
layout:{type:'auto'},
initComponent: function() {
var me = this;
me.addEvents(
/**
* @event redraw
* Fires when the chart is being redraw.
* (The axis are being redraw as well)
*/
'redraw',
/**
* @event beforeredraw
* Fires before the chart is being redraw.
*/
'beforeredraw'
);
/**
* Function that verifies if this chart was set as a master chart
*
* @return true if this chart set as a master or else false
*/
me.isSliderMaster = function(){
var slider = me.slider;
if (slider) {
return slider.master;
}
return false;
};
/**
* Function for getting the chart's axis position to be used by the slider.
* [Default set to 'bottom']
*
* @return axis position
*/
me.getSliderAxis = function(){
var ret = 'bottom',
slider = me.slider;
if (slider && slider.axis) {
ret = slider.axis;
}
return ret;
};
// call super;
this.callParent(arguments);
}
});
Chart.override({
redraw: function(bool) {
this.fireEvent('beforeredraw', bool, this);
var instance = this.callOverridden();
this.fireEvent('redraw', bool, this);
return instance;
}
});
/**
* @class extjs4core.components.chart.Container
* Container helper, it auto align a given Slider(e4chartmslider) and charts(e4chart).
*
* @cfg items
* Set the items to be add to the container.
* The items should contain one slider(e4multislider) and at least one chart(e4chart).
*/
Ext.define("Container", {
extend:'Ext.container.Container',
alias: 'widget.e4chartcontainer',
layout:{type:'vbox', align:'stretch'},
initComponent: function() {
var me = this, chartItems=[], sliderItems = [], cItems=[], chartContainer={},
meItems = me.items,
size = meItems.length;
// collect chart and slider items
collect(meItems, size, chartItems, sliderItems);
// setup the chart container
initChartContainer(chartContainer, chartItems);
// package the slider and charts components
cItems.push(chartContainer);
cItems.push(sliderItems[0]);
Ext.apply(this, {
items:[].concat((cItems || []))
});
// call super;
this.callParent(arguments);
function collect(meItems, size, chartItems, sliderItems) {
var idx=0, item;
// collect charts components
for (; idx<size; idx++) {
item = meItems[idx];
if (item){
if (item.xtype === 'e4chart') {
chartItems.push(item);
} else if (item.xtype === 'e4chartmslider') {
if (sliderItems.length < 1) {
sliderItems.push(item);
} else {
Ext.log(" Chart component accept only one slider component, other will be ignored. ");
}
}
}
}
if (chartItems.length == 0) {
Ext.error(" No Chart component added ");
}
}
function initChartContainer(chartContainer, chartItems) {
chartContainer.layout = { type: "hbox", align:"stretch"};
chartContainer.xtype = "container";
chartContainer.items = [].concat(chartItems);
}
}
});
/**
* @private
*
* @class extjs4core.components.chart.Range
* Range class, responsible for creating the range area and the ticks with its labels.
*
* @cfg rangeStyle
* Set the range sprite style
*
* @cfg {Object} [rangeStyle={type:'rect', radius:2, fill:'#c1c1c1', stroke:'#c0c0c0', 'stroke-width':1, opacity:.5}]
* Set the Range Sprite style
*
* @cfg [ticksPos={x: 3, y: 20}]
* The offset of the range ticks labels.
*
* @cfg {Number} [stepTickLabel=1]
* Set the steps for the labels display
*
* @cfg style
* Set the ticks sprite style
*
*/
Ext.define("Range", {
extend:'Ext.draw.Component',
alias:'widget.e4chartrange',
require:["Ticks"],
padding:0,
width:"100%",
layout:{type:'auto'},
initComponent:function () {
var me = this;
me._rangeStyle = me.rangeStyle;
me._dateFormat = me.dateFormat;
me._sprite = me.createSprite();
me._stepTickLabel = me.stepTickLabel;
me._increment = me.increment;
me._style = me.style;
me._ticksPos = me.ticksPos;
if (!this.surface) {
this.on({
afterrender:function (compArg) {
compArg.drawRange(compArg);
}
});
}
},
/**
* Create the range sprite
*/
createSprite:function () {
var me = this;
return Ext.create('Ext.draw.Sprite', me._rangeStyle);
},
/**
* Draw the range slider labels and ticks.
*
* @param compArg
*/
drawRange:function (compArg) {
var me = compArg,
idx = 0, labelItem,
labels, dateFormat = me._dateFormat;
if (!me._bbox) {
me._bbox = me.getBox();
}
labels = me.labels;
// add range sprite
me.surface.add(me._sprite).show(true);
// draw ticks
me._ticks = new Ticks({bbox: me._bbox,
fromVal:(me._min || 0),
toVal: (me._max || (labels.length-1)),
style: me._style,
increment: me._increment,
ticksPos: me._ticksPos,
stepTickLabel: me._stepTickLabel
});
if (labels) {
for (idx = 0; idx < labels.length; idx++) {
if (labels[idx]) {
labelItem = labels[idx];
if (dateFormat) {
labelItem = new Date(labelItem || undefined);
labels[idx] = Ext.Date.format(labelItem, dateFormat);
}
}
}
me._ticks.setLabels(labels);
}
me._ticks.generateTicks();
me._ticks.attach(me.surface);
}
});
Ext.namespace("Ticks");
/**
* @private
* @class extjs4core.components.chart.Ticks
* Ticks class is responsible for drawing the data ticks and labels over the Slider.
*
* @param config (accept configuration properties: {bbox, fromVal, toVal, style, increment, ticksPos, stepTickLabel}
*
* @cfg {Object} bbox
* The bounding box of the draw area
*
* @cfg {Object} fromVal
* Set the high range value
* @cfg {Object} toVal
* Set the low range value
*
* @cfg {Number} increment
* Set Slider increment factor.
*
* @cfg [ticksPos={x: 3, y: 20}]
* The offset of the range ticks labels.
*
* @cfg {Number} [stepTickLabel=1]
* Set the steps for the labels display
*
* @cfg {Object} style
* Set the ticks sprite style (TBD, not fully supported)
*
*/
Ticks = function (config) {
this._style = config.style;
this._bbox = config.bbox;
this._ticks = [];
this._displayText = [];
this._labels = null;
this._from = config.fromVal;
this._to = config.toVal;
this._increment = config.increment;
this._ticksPos = config.ticksPos;
this._stepTickLabel = config.stepTickLabel;
this._bboxEndPointsFactor = 0;
this._bboxLabelEndPointsFactor = -30;
this._bboxLabelStartPointsFactor = 5;
if (!this._ticksPos) {
this._ticksPos = {};
this._ticksPos.x = 0;
this._ticksPos.y = 20;
}
};
/**
* Resize the ticks according the given bounding box its was drawn in.
*
* @param surface The surface that holds the ticks
* @param bbox The bounding box the ticks was drawn in.
*/
Ticks.prototype.resize = function (surface, bbox) {
var idx=0;
this._bbox = bbox;
for (; idx < (this._ticks.length); idx++) {
if (this._ticks[idx].remove) {
this._ticks[idx].remove();
}
if (this._displayText[idx].remove) {
this._displayText[idx].remove();
}
}
this._ticks = [];
this._displayText = [];
this.generateTicks();
this.attach(surface);
};
/**
* Draw the ticks and labels
*
*/
Ticks.prototype.generateTicks = function () {
var spriteTickVar = null;
var spriteTextVar = null;
var idx = 1;
var range = (this._to - this._from);
var textLabelIdx = this._from;
var strokeStyle = "#121212", minorStrokeStyle = "#656565", strokeWidthStyle = 2;
// TODO Use merge utils
if (this._style) {
if (this._style.stroke) {
strokeStyle = this._style.stroke;
}
if (this._style["stroke-width"]) {
strokeWidthStyle = this._style["stroke-width"];
}
}
// Generate Range Ticks
if (idx < (range + 1)) {
for (; idx < (range + 1); idx++) {
_generate(this, idx, textLabelIdx);
textLabelIdx++;
}
}
_generate(this, -1, this._to);
// Generate End Points Ticks
_generate(this, -2, this._from);
function _generate(thiz, idx, textLabelIdx) {
var stepTickLabel = thiz._stepTickLabel, stepTickLabelVar = ((textLabelIdx % stepTickLabel) === 0),
xPos = Math.abs(Math.round(thiz.translateValue((thiz._bbox.width ), idx)));
if (idx === -1) {
xPos = (thiz._bbox.width-thiz._bboxEndPointsFactor);
} else if (idx === -2) {
xPos = thiz._bboxEndPointsFactor;
}
spriteTickVar = Ext.create('Ext.draw.Sprite', {
path:Utils.generatePath(xPos, 5, xPos, 10),
x:0,
y:0,
type:'path',
opacity:0.6,
'stroke':(stepTickLabelVar ? strokeStyle : minorStrokeStyle),
'stroke-width':strokeWidthStyle});
spriteTickVar.pos = xPos;
thiz._ticks.push(spriteTickVar);
if (idx === -1) {
xPos += thiz._bboxLabelEndPointsFactor;
} else if (idx === -2) {
xPos = thiz._bboxLabelStartPointsFactor;
}
var labelOrg = (thiz._labels != null ? thiz._labels[textLabelIdx] : textLabelIdx);
var labelVar = (stepTickLabelVar ? labelOrg : "");
spriteTextVar = Ext.create('Ext.draw.Sprite', {
text:labelVar,
x:(xPos - thiz._ticksPos.x),
y:thiz._ticksPos.y,
width:10,
height:10,
type:'text'});
thiz._displayText.push(spriteTextVar);
}
};
/**
* Get a specific tick by an index
*
* @param index The tick's index
*/
Ticks.prototype.getTick = function (index) {
index = Math.abs((this._to - this._from) - (this._to - index));
return this._ticks[index];
};
/**
* Get the tick position by an index
*
* @param index The tick's index
*/
Ticks.prototype.getTickPos = function (index) {
var tick = this.getTick(index);
var edge = (index > 0 ? this._bbox.width : 0);
return (tick ? tick.pos : edge);
};
/**
* Attach the ticks to a given surface
*
* @param surface The surface t be attach the ticks to
*/
Ticks.prototype.attach = function (surface) {
if (surface) {
var size = this._ticks.length;
if (size <= 0) {
console.log({msg:'No Sprite components available. Attach process ignore ', level:'warn'});
} else {
while (--size) {
surface.add(this._ticks[size]).show(true);
surface.add(this._displayText[size]).show(true);
}
}
}
};
/**
* Set the labels array to be displayed on the slider.
* (If not passed incremental numbers will be generated
*
* @param labelsArr - array of labels to be displayed
*/
Ticks.prototype.setLabels = function (labelsArr) {
this._labels = labelsArr;
};
Ticks.prototype.getRatio = function (width) {
var v = this._to - this._from;
return (v === 0 ? width - 7 : ((width - 7) / v));
};
Ticks.prototype.translateValue = function (widthArg, value) {
var ratio = this.getRatio(widthArg);
return (value * ratio) - ratio;
};
/**
* @class extjs4core.components.chart.Utils
*
* General Utilities
*
*/
Ext.namespace("Utils");
Utils = function () {
return {
/**
* Generate a line path string to be used by a Sprite object.
*
* @param ax The first x line position
* @param ay The first y line position
* @param ax1 The second x line position
* @param ay1 The second y line position
*/
generatePath:function (ax, ay, ax1, ay1) {
return "M" + ax + ' ' + ay + 'L' + ax1 + ' ' + ay1 + ' Z';
},
/**
* Get an Axis object from a given chart by its index
*
* @param chartArg The chart reference
* @param idx The Axis index
*/
getAxis:function (chartArg, idx) {
var axes, items;
if (chartArg) {
axes = chartArg.axes;
if (axes) {
items = axes.items;
if (items && items.length > 0) {
return items[idx];
}
}
}
return null;
},
/**
* Get an Axis object from a given chart by its position.
*
* @param chartArg The chart reference
* @param position The Axis position
*/
getAxisByPosition:function (chartArg, position) {
var axes, items, ii;
if (chartArg) {
axes = chartArg.axes;
if (axes) {
items = axes.items;
for (ii = 0; ii < items.length; ii++) {
if (items[ii].position == position) {
return items[ii];
}
}
}
}
return null;
},
/**
* Verify if an Axis object was loaded after calling 'loadData' or 'bindStore' functionality
*
* @param chartItem The chart reference
* @param axisPosition The axis position
*/
isAxisLoaded:function (chartItem, axisPosition) {
var chartAxis,
chartAxisLength,
chartItemsLength,
chartItems;
if (chartItem && axisPosition) {
chartAxis = this.getAxisByPosition(chartItem, axisPosition);
chartItems = (chartItem.store ? chartItem.store.data.items : undefined);
if (chartAxis && chartItems) {
chartAxisLength = (chartAxis.labels ? chartAxis.labels.length : 0);
chartItemsLength = chartItems.length;
if (chartAxisLength >= chartItemsLength) {
return true;
}
}
}
return false;
}
};
}();
Ext.application({
name:'',
appFolder:'',
autoCreateViewport:false,
launch:function () {
var me = this,
viewport = Ext.create('Ext.container.Viewport'),
mainContainer = Ext.create("Ext.Container", {
layout:{type:'fit', align:'stretch'}
}),
mainView = Ext.create("Ext.Container", {
layout:{type:'vbox', align:'stretch'},
items:[
{
//flex:1,
xtype:"panel",
layout:'fit',
title:"Tests",
items:[
{ xtype: 'test3' }
]
} ]
});
mainContainer.add(mainView);
viewport.add(mainContainer);
viewport.show();
},
getBtnTests:function (arr) {
function getBtnConf(idx) {
return {
xtype:'button',
margin:10,
text:'Run Test ' + idx,
handler:function () {
var me = this, view = this.getTestView({testName:idx}),
container = Ext.getCmp("workspaceId");
if (container) {
container.removeAll();
container.add(view);
}
}
}
}
var me = this,
ret = [],
idx = 1,
size = arr.length
for (; idx <= size; idx++) {
ret.push(Ext.merge({}, getBtnConf(idx)));
}
return ret;
},
getTestView:function (data) {
this.view = Ext.create('Test'+ data.testName);
var me=this;
return this.view;
}
});
});
Powered by vBulletin® Version 4.1.5 Copyright © 2013 vBulletin Solutions, Inc. All rights reserved.