On embeding SVG graphs and reloading when activating tabs

[LuisVielva]

Hi,

I embed a dynamic SVG chart on a new content Panel using

var idNewTab = Ext.id();
var cp = new Ext.ContentPanel
(
   idNewTab, 
   {
       autoCreate: true, 
       title: title,
       closable: true
   }
);

layout.add
(
    'center', 
    cp
);

Ext.get(idNewTab).dom.innerHTML = 
  "<embed id='svg' src='graph.svg' width='600' height='400' />";

I have a multitab region with one graph in each tab. I can interact with the active chart selecting ranges, colors, scales, etc. When I activate another tab, the corresponding svg is reloaded again, so that all previous changes are lost (it happens in FireFox, it does not happen in IE).

I have found that changing the showAction function from Ext.TabPanelItem

        
        showAction : function()
        {
	        this.bodyEl.setStyle("position", "relative");
	        this.bodyEl.setTop("");
	        this.bodyEl.setLeft("");
	        this.bodyEl.show();
        },

in order to use "absolute" instead of the original "relative" the SVG is not reloaded when activating tabs. I wonder if there is another way of bypassing the problem or if changing the ExtJS source to use "absolute" could cause problems in other places.

[Ronaldo]

Hi,

I was wondering if you've found a solution, as I'm facing the same problem...
i can draw in a tab, but the same code doesn't work any more if I select another tab and come back again.

Ah, well for Ext 2.0 ...

Ronald