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)

Richard JP Le Guen · Accepted Answer · 2011-05-25T14:25:31.963

2

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:

edited May 25 '11 at 14:25

answered May 25 '11 at 14:19

Richard JP Le Guen

28,364
7
89
119

Having some problems with the Ext4 charts stuff, input appreciated - http://stackoverflow.com/questions/6455873/using-extjs-4-charts-in-extjs-3-application – OrangeDog Jun 23 '11 at 14:40

score 0 · Answer 2 · answered May 20 '11 at 15:45

0

I don't think what you're doing is possible. ExtJS 4 has a completely new rendering engine, and so it's looking for a layout container that doesn't exist.

You'd be far better off migrating from ExtJS 3 -> 4.

answered May 20 '11 at 15:45

JamesHalsall

13,224
4
41
66

Adding ExtJS4 components to ExtJS3 components?

2 Answers2