Results 1 to 4 of 4

Thread: Draggable panel 'jumps' off screen

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    22
    Vote Rating
    0
      0  

    Default Draggable panel 'jumps' off screen

    I'm trying to implement a draggable panel within another panel. I've set up the parent panel to be a dropzone, and i've set the child panel to have the property "draggable: true".

    This is a quick video of the behavior I took:
    http://youtu.be/ve6762fXUBo

    In my handler for "onNodeDrop" I have the panel automatically reposition itself at 50x50 so I can access it again to demo this behavior.

    This is my code:
    Code:
    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
    	}],
    	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;
    		            
    		        }
                });
                
            
                
            }
        }
    });

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Answers
    102
    Vote Rating
    86
      0  

    Default

    is this reproducible on a vanilla page?

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    22
    Vote Rating
    0
      0  

    Default

    The application consists of a viewport and two panels. One parent, the child draggable. The parent panel is the dropzone and the child has the "draggable:true" property.

  4. #4
    Sencha Premium User
    Join Date
    Apr 2011
    Location
    Doylestown, PA
    Posts
    15
    Vote Rating
    1
      0  

    Default

    @cflynn07 did you find the solution, I'm facing the same problem.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •