Question

当我使一个给定的面板“可拖动”时，是否有一个用于拖尾事件的监听器？我发现通过在初始配置中启用“draggable”属性，我可以在另一个面板中创建一个可拖动的面板，但是我想在拖动发生时捕获事件。看看文档，我看到我可以添加像“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
       },
});

Answer 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 是event-Object

Answer 2

我正试图在拖动开始之前修改Ext.window.Window上的组件，并在sencha论坛中发现draggable窗口监听dragstart事件，也许它有效也是Panel。

我使用了这段代码：

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

像魅力一样工作。使用Ext JS 4.1.0

在我的应用程序中工作

在拖动结束时，我发现move的{{1}}事件符合需要。

Answer 3

要使用带有Ext.panel.Panel的dragstart侦听器，您需要设置simpleDrag：true。

但是当simpleDrag处于活动状态时，您无法删除，只需将Panel拖动/移动为窗口。

extjs面板的可拖动事件

3 个答案: