extjs 面板的可拖动事件

Posted 2023-02-26

【中文标题】extjs 面板的可拖动事件

【英文标题】：draggable events for an extjs panel

【发布时间】：2012-11-14 18:13:29

【问题描述】：

当我将给定的面板设置为“可拖动”时，是否有一个拖动结束事件的侦听器？我发现我可以通过在其初始配置中启用“可拖动”属性来使面板在另一个面板内可拖动，但我想在拖动发生时捕获事件。查看文档，我发现我可以添加像“load”这样的监听器，但我没有看到我可以监听的所有受支持事件的列表。这可以在配置中处理还是应该使用 addListener()？无论哪种方式，语法是什么，我如何使用文档来解决这个问题？每次我的可拖动面板围绕其容器移动时，我都希望能够触发一个函数。谢谢。

var panel = Ext.create('Ext.tree.Panel', 
     draggable: true,
     width: 200,
     height: 200,
);

我希望我能做这样的事情......

var panel = Ext.create('Ext.tree.Panel', 
    draggable: true,
    width: 200,
    height: 200,
    listeners:             
       dragging: function(e)  
           // being dragged
       ,
       dropped: function(e)  
           // dropped
       ,
);

【参考方案1】：

在这种情况下，您不会对听众这样做。您可以覆盖四种模板方法

onBeforeStart

onDrag

onEnd

onStart

所以你可以这样做：

var panel = Ext.create('Ext.tree.Panel', 
     draggable: 
         onDrag: function(e) 
              // do what you like
         ,
         onEnd: function(e) 
              // do what you like
         
     ,
     width: 200,
     height: 200,
);

注意参数 e 是事件对象

【讨论】：

@Leprosy 不，你错了。这些是模板方法，这意味着它们将被覆盖。

刚刚在 4.1.0 中尝试了一个窗口。方法覆盖后拖动正常行为不起作用。但是当 Window 可拖动时，它会使用 ComponentDragger，它有一个 dragstart 事件，该事件会在您可以监听的窗口上触发。

@Leprosy 窗口是面板的一种特殊子类型，它使用自定义组件拖动器，它本身设置模板方法。

【参考方案2】：

我正在尝试在拖动开始之前修改 Ext.window.Window 上的组件，并在 sencha 论坛中发现 draggable 窗口侦听 dragstart 事件，也许它也适用于 Panel .

我使用了这个代码：

listeners: 
    dragstart: function() 
        console.log('we are starting the drag');
    

而且工作起来就像一个魅力。在我的应用程序中工作，使用 Ext JS 4.1.0

对于拖动结束，我发现Ext.window.Window 的move 事件适合需要。

【参考方案3】：

要在 Ext.panel.Panel 中使用 dragstart 监听器，您需要设置 simpleDrag: true。

但是当 simpleDrag 处于活动状态时，您不能拖放，只需将面板作为窗口拖动/移动即可。