更好地理解 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 事件并实例化名称为 instance1 和 instance2 的第三方图像库的每个实例（与选项卡容器相同 div id's).

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

即：

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。

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

Better understanding Ext.tab.Panel and explicitly setting the html

html

javascript

extjs

openseadragon