Hybrid View

  1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    25
    Vote Rating
    0
    rendianmendian is on a distinguished road

      0  

    Default Swapping panels within viewport using drag and drop

    Swapping panels within viewport using drag and drop


    Hello,

    I'm trying to swap panels inside a viewport (or parent panels) using drag and drop method.
    From the basic example in the API code, I manage to drag the panel the drop it somewhere.

    Here's the script:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>  
    	<head>  
    		<meta http-equiv="content-type" content="text/html; charset=windows-1250">  
    		<meta name="generator" content="PSPad editor, www.pspad.com">  
    		<title>PANELS D&D
    		</title>  
    		<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />   
    		<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>  
    		<script type="text/javascript" src="lib/ext/ext-all.js"></script>
    		<script type="text/javascript">
    			window.onload = function() {
    				EXTappViewport = new Ext.Viewport({
    					id		: 'application-viewport',
    					layout	: 'border',
    					defaults: {
    						border		: true,
    						collapsible	: false,
    						split		: false
    		            },
    					items	: [{
    						region	: 'north',
    						id		: 'top-bar',
    						height	: 30,
    						margins	: '4 4 4 4',
    						html	: 'TOP BAR'
    		            }, {
    						region		: 'center',
    						id			: 'app-center',
    						layout		: 'border',
    						margins		: '4 4 4 4',
    						defaults	: {
    							border		: false,
    							collapsible	: false,
    							split		: true,
    							draggable	: {
    								//      Config option of Ext.Panel.DD class.
    								//      It's a floating Panel, so do not show a placeholder proxy in the original position.
    								        insertProxy: false,
    								
    								//      Called for each mousemove event while dragging the DD object.
    								        onDrag : function(e){
    								//          Record the x,y position of the drag proxy so that we can
    								//          position the Panel at end of drag.
    								            var pel = this.proxy.getEl();
    								            this.x = pel.getLeft(true);
    								            this.y = pel.getTop(true);
    								
    								//          Keep the Shadow aligned if there is one.
    								            var s = this.panel.getEl().shadow;
    								            if (s) {
    								                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
    								            }
    								        },
    								
    								//      Called on the mouseup event.
    								        endDrag : function(e){
    								            this.panel.setPosition(this.x, this.y);
    								        }
    							}
    						},
    						items		: [{
    							title	: 'WEST',
    							region	: 'center',
    							html	: 'WEST SIDE'
    		                }, {
    		                	title	: 'EAST',
    							region	: 'east',
    							width	: 600,
    							html	: 'EAST SIDE'
    		                }]
    					}, {
    						region		: 'south',
    						id			: 'bottom-bar',
    						height		: 30,
    						margins		: '4 4 4 4',
    						html		: 'BOTTOM BAR'
    					}]
    				});
    			}
    		</script>   
    	</head>  
    	<body> 
    	</body>
    </html>
    When I drag WEST panel, and I dropped it on the EAST panel holder, I want both panels swap places.

    And it would be nice as well if I can get a 'snap to container' feeling along the dragging process.

    Any clue how to do this, links, or even snippets will be greatly appreciated.
    Thanks in advance.

    Cheers...

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    From http://extjs.com/deploy/dev/docs/?cl...t.BorderLayout

    The regions of a BorderLayout are fixed at render time and thereafter, no regions may be removed or added.

    You will need to configure your regions layout:'fit', and then you will be dragging the sole child Component of the regions around.

    You will not perform any positioning, you will simply remove them from their current owners (http://extjs.com/deploy/dev/docs/?cl...member=ownerCt) taking care not to have the remove method destroy them and add them into the new container.

  3. #3
    Sencha Premium Member joshua.ball@osi.com's Avatar
    Join Date
    Nov 2012
    Location
    Sacramento, CA
    Posts
    43
    Vote Rating
    1
    joshua.ball@osi.com is on a distinguished road

      0  

    Default


    Any chance this functionality has been extended into the border layout since its original post? This would be an excellent feature for that type of layout. It looks like the Ext.Net framework has this working in what appears to be a border layout: http://examples1.ext.net/#/DragDrop/...ropable_Panel/

Thread Participants: 2