Sencha Ext JS 4, перетаскиваемая панель «выпрыгивает» из родителя, когда инициируется событие перетаскивания - PullRequest
Новая
       2

Sencha Ext JS 4, перетаскиваемая панель «выпрыгивает» из родителя, когда инициируется событие перетаскивания

2 голосов
/ 24 января 2012

У меня есть приложение ext js 4, которое состоит из родительской панели и дочерней панели.Родительская панель настроена для использования в качестве рабочей зоны, а дочерний элемент - перетаскиваемый.Когда я перетаскиваю дочернюю панель, она выпрыгивает из экрана.

Вот видео на YouTube, которое я снял для демонстрации поведения: http://youtu.be/ve6762fXUBo

А вот мой исходный код:

ПРИМЕЧАНИЕ. В onNodeDrop я возвращаю панель в положение 50x50, иначе я не смогу повторить это поведение.

Ext.define('CS.view.ViewDashboard', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.dashboard',
    layout: 'fit',
    items: [{
        xtype: 'panel',
        id: 'test_panel',
        title: 'test panel',
        html: 'test panel',
        draggable: true,
        constrain: true,
        border: true,
        width: 300,
        height: 300,
        listeners: {
            render: function(el){
                el.center();
            }
        }
    }],
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        layout: 'hbox',
        pack: 'center',
        items: [{   
                xtype: 'splitbutton', 
                text: 'Applications',
                handler: function(){
                    console.log('splitbutton');
                },
                menu: new Ext.menu.Menu({
                    items: [
                        {text: 'Item 1', hander: function(){}},
                        {text: 'Item 2', hander: function(){}},
                    ]
                })
        }]
    }],
    listeners: {
        render: function(sender){

            console.log(sender);

            sender.dropZone = new Ext.dd.DropZone(sender.body, {

                getTargetFromEvent: function(e) {

                    console.log('getTargetFromEvent');

                    var temp = { 
                        x: e.getX() - this.DDMInstance.deltaX, 
                        y: e.getY() - this.DDMInstance.deltaY
                    };

                    console.log(temp);
                    return temp;

                },

                // On entry into a target node, highlight that node.
                onNodeEnter : function(target, dd, e, data){ 
                //    Ext.fly(target).addCls('my-row-highlight-class');
                },

                // On exit from a target node, unhighlight that node.
                onNodeOut : function(target, dd, e, data){ 
                //    Ext.fly(target).removeCls('my-row-highlight-class');
                },

                onNodeOver : function(target, dd, e, data){ 
                    return Ext.dd.DropZone.prototype.dropAllowed;
                },

                onNodeDrop : function(target, dd, e, data){

                    console.log('onNodeDrop');
                    data.panel.setPosition(50, 50, true);
                    return true;

                }
            });



        }
    }
});
...