Ext.draw.Component gradient not displaying in IE - extjs

Question

I can't be the only person with this problem, but my searches have left me lost and confused.
I have a custom Ext.draw.Component that uses a gradient fill. My understanding is that older browsers don't support gradients, but I thought Sencha accounted for that with by adding CSS to the object rendered.
Component in Chrome:
Component in IE:
My questions are thus:
Can Ext.js render gradients to IE8 and IE9? (IE10 displays fine)
Is there a way to determine if the browser is going to not render the gradient and I can just display something else (i.e. the compenent in IE wouldn't look so bad without the white elipses)?
UPDATE
Here is the code that generates the Stoplights. http://jsfiddle.net/wilsjd/Ts2qU/10/
var sencha = Ext.create('Ext.draw.Component', {
width: 170,
height: 170,
renderTo: this.get('elementToRenderTo'),
gradients: [{
id: 'middleGradient',
angle: 180,
stops: {
0: {
color: this.get('backgroundColor'),
opacity: 1
},
50: {
color: this.get('backgroundColor'),
opacity: .6
},
100: {
color: this.get('backgroundColor'),
opacity: 1
}
}
}, {
id: 'lightGradient1',
angle: -90,
stops: {
0: {
color: '#ffffff',
opacity: 0.01
},
100: {
color: '#ffffff',
opacity: .8
}
}
}, {
type: 'radial',
id: 'radialGradient1',
centerX:123.88702,
centerY:391.47498,
radius:166.47372,
focalX:124.57159,
focalY:391.47498,
stops: {
0: {
color: '#ffffff',
opacity: 0.01
},
100: {
color: '#ffffff',
opacity: .8
}
}
}],
items: [{
type: 'rect',
x: 1.6620979,
y: 52.362183,
radius: 90,
width: 448.10959,
height: 1000,
fill: 'url(#middleGradient)',
stroke: 'none'
}, {
type: "circle",
radius: 140,
x:224,
y:896,
stroke: "#000000",
'stroke-width': 7,
fill: this.get('goodColor')
}, {
type: "circle",
x:224,
y:214,
radius:140,
stroke: "#000000",
'stroke-width': 7,
fill: this.get('poorColor')
}, {
type: "circle",
x:224,
y:555,
radius: 140,
stroke: "#000000",
'stroke-width': 7,
fill: this.get('cautionColor')
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 156,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 498,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 838,
fill: 'url(#lightGradient1)'
}, {
type: "text",
text: this.get('poorValue'),
x: poorValueX,
y: 210,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: this.get('cautionValue'),
x: cautionValueX,
y: 550,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: this.get('goodValue'),
x: goodValueX,
y: 890,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: poorLabel,
x: 500,
y: 210 + poorChangeY,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: cautionLabel,
x: 500,
y: 550 + cautionChangeY,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: goodLabel,
x: 500,
y: 890 + goodChangeY,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: this.get('title'),
x: 0,
y: 0,
fill: "Black",
font: "100px bold"
}, {
type: "text",
text: "Total = " + this.get('total'),
x: 100,
y: 1150,
fill: "Black",
font: "80px bold"
}]
});

Answer 1

Ext.js can indeed render gradients in IE, but in this case it isn't working (still need source to determine why)
Added if statement to determine if the browser was IE8 or IE9 (I checked the document mode too - IE10 doesn't work if in IE8 document mode), and then add my ellipses)