Question

我使用extjs 6.2.0 enter image description here'xtye：draw'来实现拓扑。当屏幕上出现一些精灵时，需要滚动条向客户显示所有精灵。但是，即使我将scrollable配置为true，它也不起作用。

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

任何建议都表示赞赏，提前谢谢。

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

extjs6.2.0绘制精灵可滚动不起作用

1 个答案: