Extjs - get SVG image element by ID inside qtip

Question

I am using ExtJS 4.1.3. I have a grid panel, where I have a grid column with some text, defined as such:

{
    xtype: 'gridcolumn',
    dataIndex: 'item1',
    text: 'Item 1',
    flex: 1,
    renderer: function(value, metaData, record) {
        if (value) {
            'data-qtip="<object id=\'svgImgId12345\' type=\'image/svg+xml\' data=\'images/myimg.svg\'></object>"'
        }
        return value;
    }
}

You can see that I have a tooltip (qtip) for this cell, where when they mouse over it, it shows a small SVG that is a visual representation of the text data in the cell. This works just fine.

However, I need the SVG image modified slightly, depending on said cell value. There are thousands of ways this svg could exist, and it would be impractical to have a separate image file for each one. So I need to update it dynamically.

I have some test code where I put the SVG image on the page directly, and I click a button to trigger a change in the image. document.getElementById(), getSVGDocument(), then get elements from the svg doc, set their attributes, etc. As a proof of concept that it can be done, that works just fine too.

My problem is that I can't seem to modify this SVG while it's inside the qtip. Doing document.getElementById('svgImgId12345'); always returns either null or undefined. I've also tried this.down('[id=svgImgId12345]') and Ext.getCmp('[id=svgImgId12345]') just to see if perchance those would work, but those return null / undefined too.

I've tried to add a listener directly through plain javascript for DOMContentLoaded, but I still get null when trying to fetch the SVG. I've even tried Ext.onReady, which I read is supposed to be fired once the page is fully loaded and ready, and even that doesn't work either, it still can't find the SVG. When I stop the Chrome debugger inside either of these onReady functions, I can see that the data is physically on the page. I can even look into the Elements tab on dev tools and see that the SVG is in fact there, exactly as I'm expecting it to be, with the ID and everything!

Obviously I'm misunderstanding something. Is there a problem with the image existing in a tooltip?

(It'd be great if I could do my dynamic updating of the SVG in each cell as it loads, but I haven't found a reasonable way to do that either). The tooltip is a requirement I don't have control over. That said, is this possible? Given that I'm on the onReady listener, and I can see the object in the Element structure, what have I missed?

Answer 1

Create a Component for your SVG and add that component in your rendering.

Here is a working example: fiddle

That way you keep the logic of the SVG to the component.