View Full Version : Raphael graphics not showing up in IE8

22 Dec 2010, 1:41 PM
Right now I'm trying to integrate Raphael with an extJS project. Currently I'm using version extJS 3.1.1, with the latest version on Raphael. I'm simply just drawing a circle inside of a BoxComponent

Controls.TimelineWindowPanel = Ext.extend(Ext.BoxComponent,
title : "Timeline"
constructor : function(config){
Ext.apply(this, config);
Controls.TimelineWindowPanel.superclass.constructor.call(this, config);

afterRender: function(p){
var size = Math.max(this.getHeight(), this.getWidth());
this.innerEl = this.el.createChild({});

var paper = Raphael(this.innerEl.dom, size, size);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

I was wondering if anybody has had experience with integrating Raphael with extJS, and why in IE8 the graphics are not drawn (IE7, Chrome, Firefox all work)

25 Dec 2010, 1:50 PM
How are you instantiating/rendering your component?

25 Dec 2010, 10:37 PM
In my code I initialized the Raphael object in the afterRender event and also did the drawing in the same event method.

25 Dec 2010, 11:53 PM
Yes but how you instantiate your Controls.TimelineWindowPanel?

28 Dec 2010, 6:58 AM
var timelineWindowPanel = new Controls.TimelineWindowPanel({});

28 Dec 2010, 7:01 AM
You don't appear to be setting any height or width on your component, try doing that.

28 Dec 2010, 7:15 AM
I can not run some demos in IE8.Does Ext JS work with IE8?

Signature spam

28 Dec 2010, 8:08 AM

The thing is the BoxComponent is being held inside of a ExtJS Window. So I want the layout of the window to handle the sizing of the Panel rather than specifying one.

28 Dec 2010, 8:09 AM
So how does your window code look? Are you using layout:'fit' on it and setting height/width?

28 Dec 2010, 8:13 AM
I'm using
layout: 'column', however I'm using a custom column layout from this post http://www.sencha.com/forum/showthread.php?45143-ColumnLayout-should-offer-the-option-to-fitHeight-and-resize.