时间戳

首页 > 解决方案 > extjs6.2.0 draw sprite scrollable 不起作用

extjs6.2 - extjs6.2.0 draw sprite scrollable 不起作用

问题描述

我使用 extjs 6.2.0在此处输入图像描述'xtye: draw' 来实现拓扑。当一些精灵离开屏幕时，需要滚动条向客户显示所有精灵。但是，即使我将可滚动配置为 true，它也不起作用。

我通过在一个容器中创建两个圆圈来简化代码以重现此问题，请查看下面的代码以供参考。

任何建议表示赞赏，在此先感谢。

Ext.define('drawtest.view.main.Main', { 扩展: '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
        }],
    }]
}]

});

标签： extjs6.2

解决方案

您必须为绘制容器的宽度/高度设置值以适合所有精灵：

    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

推荐阅读