Results 1 to 3 of 3

Thread: Swapping panels within viewport using drag and drop

  1. #1

    Default Swapping panels within viewport using drag and drop


    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:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    		<meta http-equiv="content-type" content="text/html; charset=windows-1250">  
    		<meta name="generator" content="PSPad editor,">  
    		<title>PANELS D&D
    		<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'
    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.


  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007



    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 ( taking care not to have the remove method destroy them and add them into the new container.

  3. #3
    Sencha Premium Member's Avatar
    Join Date
    Nov 2012
    Sacramento, CA


    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:

Posting Permissions

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