Adding ExtJS4 components to ExtJS3 components?

Question

I've got an ExtJS3 application which could benefit from the ExtJS4 SVG stuffs. Online there is an example of how to use sandbox mode to include ExtJS4 components in an ExtJS3 application... but in the example the ExtJS4 components are in their own floating window, so the ExtJS4 components aren't really added to ExtJS3 components; they just co-exist rather independently.

Is there a way to add an ExtJS4 component to an ExtJS3 component while running in sandbox mode? For example:

var item = Ext4.create("Ext.panel.Panel", { // ExtJS4
    /* config */
});
var parent = new Ext.Panel({ // ExtJS3
    items:[item],
    /* more config */
});

If I try something like this, I usually get an error like...

this.container is null (http://localhost:4000/path/ext-4.0.0/builds/ext-all-sandbox-debug.js:27723)

Answer 1

It would seem that some Ext4 components can renderTo DOM elements in Ext3 components, with limited success:

var ext3Panel = new Ext.Panel({
    title:'Ext3'
});
ext3Panel.on('afterrender', function() {
    var ext4Panel = Ext4.create('Ext.panel.Panel', {
        title:'Ext4',
        renderTo:ext3Panel.body.dom,
    });
    ext3Panel.add(ext4Panel);
});

This seems to be most useful when using Ext4 charts in an Ext3 project.

Citations:

• Sencha Forum: ExtJs3 and ExtJs4 in One App
• Sencha Forum archives: Using Ext JS 4 Charts in Ext JS 3?