Javascript 无法将Raphael画布与Ext Js网格面板一起滚动
我已经使用ExtJS在网格面板中创建了许多网格。我使用拉斐尔创建的箭头连接了两个网格。我的网格面板是可滚动的,当我滚动网格面板时,网格会随之滚动,但在纸上创建的箭头仍保留在创建它们的位置。请帮帮我 下面是我创建的面板的ExtJS代码。我在此面板上拖放网格Javascript 无法将Raphael画布与Ext Js网格面板一起滚动,javascript,jquery,extjs,raphael,Javascript,Jquery,Extjs,Raphael,我已经使用ExtJS在网格面板中创建了许多网格。我使用拉斐尔创建的箭头连接了两个网格。我的网格面板是可滚动的,当我滚动网格面板时,网格会随之滚动,但在纸上创建的箭头仍保留在创建它们的位置。请帮帮我 下面是我创建的面板的ExtJS代码。我在此面板上拖放网格 new Ext.TabPanel({ id : 'xxx', region : 'center', deferredRender : false,
new Ext.TabPanel({
id : 'xxx',
region : 'center',
deferredRender : false,
activeTab : 0,
items : [ {
id : 'tabId',
contentEl : 'center1',
title : 'Editor_DragDrop',
closable : true,
autoScroll : true,
enableDrop : true,
html : '<div class="hospital-target"></div>',
listeners : {
afterrender : initializeDropZone
}
}
}
网格绘制在面板上。箭头画在面板上方的拉斐尔画布上。它们实际上并没有联系在一起。当我滚动面板时,面板上的所有对象都会滚动。但由于画布未链接到面板,因此它保持静态
下面是帮助您更好地理解它的图像
滚动前:
滚动后:
在窗口中获取网格。。并捕捉窗口的浮动/移动事件。并根据窗口的位置更改线的坐标。您需要在问题中添加一些HTML。我已尝试解释我编写的代码。如果需要在我的问题中添加其他内容,请告诉我。
var width = Ext.getCmp('tabId');
var tabPos = Ext.getCmp('tabId').getPosition();
var xpos = this.grid.getWidth() ;
var ypos = tabPos[1] ;
this.raphaelCanvas = new Raphael(tabPos[0],ypos,width.getWidth(),width.getHeight());
canvas=this.raphaelCanvas;