PDA

View Full Version : Raphael graphics not showing up in IE8



Albinoswordfish
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");
Controls.TimelineWindowPanel.superclass.afterRender.apply(this,arguments);
}
});

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)

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

Albinoswordfish
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.

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

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

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

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

Signature spam

Albinoswordfish
28 Dec 2010, 8:08 AM
@mankz

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.

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

Albinoswordfish
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.