extjs6.2.0 рисовать спрайт с прокруткой не работает

Question

Я использую extjs 6.2.0, введите здесь описание изображения 'xtye: draw' для реализации на топологии. Нужна полоса прокрутки, чтобы показать клиенту все спрайты, когда некоторые из спрайтов исчезли с экрана. Тем не менее, даже если я настроил прокрутку до истины, это не работает.

Я упростил коды, создав два круга в одном контейнере, чтобы воспроизвести эту проблему, пожалуйста, проверьте коды ниже для справки.

Любые предложения приветствуются, спасибо заранее.

Ext.define ('drawtest.view.main.Main', {extend: 'Ext.tab.Panel', xtype: 'app-main',

requires: [
    'Ext.plugin.Viewport',
    'Ext.window.MessageBox',

    'drawtest.view.main.MainController',
    'drawtest.view.main.MainModel',
    'drawtest.view.main.List',
    'Ext.draw.plugin.SpriteEvents',
    'Ext.draw.Container'
],

controller: 'main',
viewModel: 'main',

ui: 'navigation',


items: [{
    xtype: 'container',
    width: 1000,
    height: 800,
    layout: 'border',
    scrollable: 'true',
    items: [{
        region: 'center',
        xtype: 'draw',
        scrollable: true,
        plugins: ['spriteevents'],
        // /scrollable: 'true',

        margin: '1 0 0 1',
        flex: 1,
        reference: 'windmachines',
        sprites: [{
            type: 'circle',
            fillStyle: '#79BB3F',
            r: 100,
            x: 100,
            y: 100
        }, {
            type: 'circle',
            fillStyle: '#79BB3F',
            r: 100,
            x: 1900,
            y: 100
        }],
    }]
}]

});

Answer 1

Вы должны поместить значения ширины / высоты контейнера отрисовки, чтобы соответствовать всем вашим спрайтам:

    Ext.create('Ext.Panel', {
        scrollable:true,
        renderTo: Ext.getBody(),
        items: [ {
                xtype: 'draw',
                width: 2100,
                height: 500,
                sprites: [{
                    type: 'circle',
                    fillStyle: '#79BB3F',
                    r: 100,
                    x: 100,
                    y: 100
                }, {
                    type: 'circle',
                    fillStyle: '#79BB3F',
                    r: 100,
                    x: 1900,
                    y: 100
                }]

        }]
    });

Считайте, что FIDDLE