javascript - 无法与 Ext Js 网格面板一起滚动 Raphael Canvas

Question

我使用 Ext js 在网格面板中创建了多个网格。我使用 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
                }
            }
       }

下面是我创建拉斐尔 Canvas 的代码。我已经在面板顶部创建了它。该 Canvas 用于在两个网格之间绘制箭头。

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;

网格绘制在面板上。箭头绘制在面板上方的拉斐尔 Canvas 上。它们实际上并没有联系在一起。当我滚动面板时，面板上存在的所有对象都会滚动。但由于 Canvas 未链接到面板，因此它保持静态。

下面的图片可以帮助您更好地理解。

滚动之前:

滚动后:

Answer 1

在窗口中获取网格..并捕获窗口的 float /移动事件。并根据窗口的位置改变线的坐标。