Лучшее понимание Ext.tab.Panel и явная настройка HTML - PullRequest
0 голосов
/ 02 июля 2018

Я хочу использовать стороннюю библиотеку изображений, для которой нужно создать экземпляр со строковым значением, которое использовалось для соответствующего идентификатора div. При этом я хотел бы использовать Ext.tab.Panel, чтобы иметь возможность переключаться между каждым экземпляром экземпляра сторонней библиотеки изображений. Я изо всех сил пытаюсь установить идентификатор div для контейнеров каждой вкладки.

Например:

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 контейнеров с вкладками).

Сторонняя библиотека изображений в порядке, но изображения не отображаются. Когда я проверяю соответствующие контейнеры каждой вкладки, то там я делаю не те идентификаторы, которые указаны выше.

т.е:.

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

Есть ли у кого-нибудь мысли о том, как установить идентификатор div для контейнеров каждой вкладки?

Спасибо за помощь!

1 Ответ

0 голосов
/ 02 июля 2018

Попробуйте это:

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

Это создаст div с идентификатором.

...