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

I want to use a third party image library that needs to be instantiated with a string value that was used for a corresponding div id. With that, I would like to use Ext.tab.Panel to be able to switch between each instantiated instance of the third party image library. I’m struggling with being able to set the div's id on the containers of each tab.

For example:

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

Then in the MainView controller, I listen to onBoxReady event and instantiate each instance of the third-party image library with the names instance1 and instance2 (same as the tab containers div id’s).

The third-party image library is instantiated fine, but the images don't show. When I inspect each tab's corresponding containers, there div ids aren’t what I set them to be above.

i.e.:

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

Does anyone have any thoughts in how to set the div's id of each tab's containers?

Thanks for the help!

Try this:

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

It will create div with an id.