更好地理解 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 相同(。

第三方图像库已正确实例化，但图像不显示。当我检查每个选项卡的相应容器时，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。