Extjs 5 Uncaught TypeError: Cannot read property 'height' of undefined - extjs5

Question

I changed extjs 4.2.4 to 5.0.0 and I have this error.
Uncaught TypeError: Cannot read property 'height' of undefined
SubSectionColumn.js?_dc=1451369036732:262
loadSprites: function() {
var chart = Ext.getCmp(this.identifier);
//var xAxisPositionArray = [55,95,135,175];
var xAxisPositionArray = new Array();//[55,95,175];
var yAxisStart = 0;
var xAxisHeight = chart.surface.height
var sprite;
var fromPosition;
var toPosition;
var width;
var noOfBars;
var sectionWidth = 0;
var newWidthValue = 0;
var tmp;
var chart = Ext.getCmp(this.identifier);
var storeLen =this.storeValue.getCount();
var teststore =this.storeValue;
var maxVal = 0;
for (var i =0; i<storeLen; i++){
tmp = parseFloat(teststore.data.items[i].get('data1'));
if (tmp >maxVal){
maxVal=tmp;
}
}
if(maxVal>0){
width = this.widthValue;
noOfBars = this.storeLength;//5;
sectionWidth = parseInt(parseInt(width)/parseInt(noOfBars));
for(var j=0;j<noOfBars;j++){
newWidthValue = parseInt(newWidthValue) + parseInt(sectionWidth);
xAxisPositionArray[j] = newWidthValue;
}
var gridArray = this.gridLineArrayVal.split(",");
for(var i=0;i<xAxisPositionArray.length;i++){
fromPosition = parseInt(xAxisPositionArray[i]);
toPosition = fromPosition+1;
sprite = Ext.create('Ext.draw.Sprite', {
type: 'path',
path: "M"+fromPosition+" " + yAxisStart +"L"+toPosition+" "+xAxisHeight+" Z", //if the value is "M100 40 L150 40", it's ok.
"stroke-width": (gridArray[i]=='dotted' || gridArray[i]=='line')?"0.4":"0",
"stroke-dasharray":(gridArray[i]=='dotted')?"4,4,2.5,4,4,4":"",
//"stroke-dasharray":"20,20",
stroke: "#9f9f9f",
//style:{cursor: 'pointer'},
surface: chart.surface
});
sprite.show(true);
};
maxVal=parseFloat(maxVal)*(0.10)+parseFloat(maxVal); //Math.round(maxVal)+1;
chart.axes.getAt(0).maximum = maxVal;
}
}

Answer 1

chart.surface is obviously undefined, as that's where you're trying to access the height property.
In ExtJS 5, there were two big changes that are likely to be relevant here. First, they tightened up on the configuration properties. Many are now prefixed, and can not be accessed by their old names. Instead, you should use (and should have used, before) the accessor methods - e.g. chart.getSurface()
Second: The charting library used in ExtJs 4 was deprecated, and has been replaced with Sencha Charts. This brought in some significant API changes.
Without more details, it's hard to say what the root cause is, but the error is definitely to do with lack of access to the surface property.