我使用Ext js在Grid Panel中创建了多个网格。我使用Raphael创建的箭头连接2个网格。我的网格面板是可滚动的,当我滚动网格面板时,网格会随之滚动,但是在纸上创建的箭头仍然是创建它们的位置。请帮帮我。
下面是我创建的面板的Ext js代码。我在这个面板上拖放网格。
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
}
}
}
以下是我创建Raphael画布的代码。我在Panel上创建了它。此画布用于在两个网格之间绘制箭头。
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;
在面板上绘制网格。箭头画在面板上方的raphael画布上。它们实际上并没有联系在一起。当我滚动面板时,滚动面板上存在的所有对象。但是由于画布没有链接到面板,它仍然是静态的。
以下图片可以帮助您更好地理解它。
滚动前:
滚动后:
答案 0 :(得分:0)
在窗口中取网格,并抓住窗口的浮动/移动事件。并根据窗口的位置改变线的坐标。