javascript - 更好地理解 Ext.tab.Panel 并明确设置 html

Question

我想使用第三方图像库，该库需要使用用于相应 div id 的字符串值进行实例化。有了这个，我希望Ext.tab.Panel能够在第三方图像库的每个实例化实例之间切换。我正在努力在每个选项卡的容器上设置 div 的 id。

例如：

Ext.define('MYAPP.view.MainView', {
    extend: 'Ext.panel.Panel',
    xtype: 'mainview',
    controller: 'mainviewcontroller',
    layout: 'fit',

    tbar: [{
        xtype: 'somebuttons',
    }],

    items: [{
        xtype: 'imagetab',
        title: 'tab1',
        items: [{
            xtype: 'container',
            html: '<div id="instance1"></div>'
        }]
    }, {
        xtype: 'imagetab',
        title: 'tab2',
        items: [{
            xtype: 'container',
            html: '<div id="instance2"></div>'
        }]
    }]
});

然后在MainView控制器中，我监听事件并使用名称和onBoxReady实例化第三方图像库的每个实例（与选项卡容器的 div id 相同）。instance1instance2

第三方图片库实例化很好，但是图片不显示。当我检查每个选项卡的相应容器时，div id 不是我在上面设置的。

IE：

html: '<div id="instance1"></div>' or id="instance2"></div>'

有人对如何设置每个选项卡容器的 div id 有任何想法吗？

谢谢您的帮助！

Answer 1

尝试这个：

Ext.create('Ext.TabPanel', {
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'container',
        id: 'instance1',
        autoEl: {
            id: 'instance1', // must be same as container id 
            ......
        }
    }]
});

它将创建带有 id 的 div。