How to redraw or repaint surface in ExtJS5?

Question

I define a drawing panel and some components which are connected each other with SVG paths. I need to redraw connection paths on surface when moving components. there is my drawing panel

{
    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'),
    }]
    }

The floating windows are adding to centerregion with draw/drop. there is another controller to draw sprites on surface,

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);

},

When connecting any items on this panel it draws sprites but not showing on browser. but if I re-size drawing panel or browser window, sprites are shown, I couldn't find any reason why its happening.

should I refresh view by using a different way?

That is the result before re-sizing screen, but add sprite method completed successfully. without resize

This screenshot is after re-size height of center region, as you see, sprite is visible now. But any event didn't fire manually on re-size action.

after resize

AsyncTask AsyncTask · Accepted Answer · 2015-03-12T11:26:01

I solved the problem, It looks like a trick but draw container is working well now. I called manually draw container's resizeHandler on draw container's 'add' listener.
It fires only one time when adding child windows on centerRegion (at first adding).

There is my solution below, firstly give an 'add listener reference to draw container:

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

function:

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

How to redraw or repaint surface in ExtJS5?

1 Answers