向ExtJS3组件添加ExtJS4组件？

Question

我有一个可以从ExtJS4 SVG stuffs中受益的ExtJS3应用程序。网上有一个关于如何使用沙盒模式在ExtJS3应用程序中包含ExtJS4组件的example……但在本例中，ExtJS4组件是在它们自己的浮动window中，因此ExtJS4组件并没有真正添加到ExtJS3组件中；它们只是相当独立地共存。

有没有一种方法可以在沙箱模式下运行时向ExtJS3组件添加ExtJS4组件？例如：

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

如果我尝试这样做，我通常会得到一个错误，比如...

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

Answer 1

似乎一些Ext4组件可以renderTo Ext3组件中的DOM元素，但成功有限：

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);
});

在Ext3项目中使用Ext4图表时，这似乎是最有用的。

引文：

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

Answer 2

我认为你在做的事情是不可能的。ExtJS 4有一个全新的渲染引擎，所以它正在寻找一个不存在的布局容器。

你最好从ExtJS 3 -> 4迁移过来。