Как перерисовать или перекрасить поверхность в 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'), 
    }] 
    } 

Плавающие окна добавления к 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); 

}, 

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

Должен ли я обновить представление, используя другой способ?

Это результат перед изменением размера экрана, но добавление спрайта успешно завершено.

Этот снимок экрана после переразмерной высоты центральной области, как вы видите, спрайт теперь виден. Но любое событие не срабатывало вручную при изменении размера.

Answer 1

Я решил проблему, Это выглядит как трюк, но рисовать контейнер хорошо работает в настоящее время. Я вызвал вручную изменить размер контейнера для рисования на Hendler на добавочном прослушивателе контейнера.
Он срабатывает только один раз при добавлении дочерних окон по центруРегион (при первом добавлении).

Существует мое решение ниже, во-первых, дать «добавить ссылку слушателю рисовать контейнер:

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