Hybrid View

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


    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, www.pspad.com">  
    		<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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Notts/Redwood City
    Vote Rating
    Animal has a spectacular aura about Animal has a spectacular aura about



    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
    Sacramento, CA
    Vote Rating
    joshua.ball@osi.com is on a distinguished road



    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