如何在 ExtJS5 中重绘或重绘表面？

Question

我定义了一个绘图面板和一些组件，它们通过 SVG 路径相互连接。移动组件时，我需要在表面上重新绘制连接路径。有我的画板

{
    xtype : 'panel',
    flex : 5,
    split : true,
    region : 'center',
    plain : true,
    itemId : 'idCenterRegion',
    id : 'centerRegion',
    border : 1,
    layout : {
        type : 'fit',
    },
    defaults : {
        autoScroll : true
    },
    listeners : {
     afterrender : 'setDDTarget'
    },
    items: [{
        xtype : 'draw',
        itemId : 'idDrawPanel',
        renderTo:Ext.getCmp('centerRegion'),
    }]
    }

浮动 windows 正在使用 draw/drop 添加到 centerregion。还有另一个控制器在表面上绘制精灵，

printPath : function(drawItem) {
    var source=drawItem.source;
    var target=drawItem.target;

    var surface = Ext.getCmp('centerRegion').down('draw')
            .getSurface('main');
    var color = "#000";

    var line1,line2;

    var posSource=[];
    var posTarget=[];
    if(source.left<target.left){
        posSource[0]=source.left+source.width;
        posTarget[0]=target.left;
        line1=15;
        line2=-15;
    }else{
        posSource[0]=source.left;
        posTarget[0]=target.left+target.width;
        line1=-15;
        line2=15;
    }

    posSource[1]=source.top+source.height/2;
    posTarget[1]=target.top+target.height/2;

    var path = [ "M", posSource[0],
                 posSource[1], "H",
                 posSource[0] + line1, "L",
                 posTarget[0] + line2, posTarget[1], "H",
                 posTarget[0] ].join(",");

    surface.add({
        type : 'path',
        path : path,
        stroke : color,
        fill : 'none',
        'stroke-width' : 2,
        surface : surface,
    }).show(true);

},

连接此面板上的任何项目时，它会绘制精灵但不会在浏览器上显示。但是如果我重新调整绘图面板或浏览器的大小 window，就会显示精灵，我找不到它发生的任何原因。

我应该使用不同的方式刷新视图吗？

这是调整屏幕大小之前的结果，但是添加精灵方法成功完成。

这张截图是调整中心区域高度后的截图，如你所见，精灵现在可见了。但是任何事件都不会在调整大小操作时手动触发。

Answer 1

我解决了这个问题，这看起来像是一个技巧，但绘制容器现在运行良好。我在绘制容器的 'add' 侦听器上调用了手动绘制容器的 resizeHandler。
在 centerRegion 上添加子项 windows（第一次添加）时，它只会触发一次。

下面是我的解决方案，首先给一个'add listener reference to draw container:

{
    xtype : 'draw',
    itemId : 'idDrawPanel',
    renderTo:Ext.getCmp('centerRegion'),
    listeners : {
      add: 'addToDrawPanel'
    },
}

函数：

addToDrawPanel:function( d, component, index, eOpts ){
    var s=d.getSize();
    var rh= d.getResizeHandler();
    rh.call(d,s);
}

如何在 ExtJS5 中重绘或重绘表面？

How to redraw or repaint surface in ExtJS5?

javascript

extjs

extjs5