JARMSTRONG@ACTSOFT.COM
28 Jun 2012, 4:27 PM
I am upgrading from Ext 4.0.7 to 4.1.0 and experiencing some weird behavior and wanted to know if anyone else ran into this or had a solution.
Link to js filddle project with sample code.
Note if you change the framework to 4.0.7 it works.
http://jsfiddle.net/TqWAr/
Simplified version of my extended bar class
Ext.define("Ext.chart.series.extendedBar", {
extend: 'Ext.chart.series.Bar',
alias: 'series.extendedbar',
type: 'extendedbar'
});
Made a simple function call that makes the sample chart from the docs
testMethod = function (extended) {
//from API docs Sample
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data': 10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 1 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data': 20 },
{ 'name': 'metric six', 'data': 25 },
{ 'name': 'metric seven', 'data': 27 }
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: extended ? 'extendedbar' : 'bar', //tell it to use my version of bar chart...
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});
Then in a onload I call testMethod(true) and testMethod(false). You will notice the testMethod(false)(normal bar chart) works as expected while the testMethod(true) the bars are messed up(Metric 1, 2, 5, 6 are incorrect) the bars extend to the edge of the chart and are longer than they should be.
Link to js filddle project with sample code.
Note if you change the framework to 4.0.7 it works.
http://jsfiddle.net/TqWAr/
Simplified version of my extended bar class
Ext.define("Ext.chart.series.extendedBar", {
extend: 'Ext.chart.series.Bar',
alias: 'series.extendedbar',
type: 'extendedbar'
});
Made a simple function call that makes the sample chart from the docs
testMethod = function (extended) {
//from API docs Sample
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data': 10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 1 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data': 20 },
{ 'name': 'metric six', 'data': 25 },
{ 'name': 'metric seven', 'data': 27 }
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: extended ? 'extendedbar' : 'bar', //tell it to use my version of bar chart...
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});
Then in a onload I call testMethod(true) and testMethod(false). You will notice the testMethod(false)(normal bar chart) works as expected while the testMethod(true) the bars are messed up(Metric 1, 2, 5, 6 are incorrect) the bars extend to the edge of the chart and are longer than they should be.