Advanced Search

Extjs Panel Drag and Drop

/ Published in: JavaScript
Save to your folder(s)
This example gives a idea about how to create a simple panel which can be dragged and dropped into another panel

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. Ext.namespace('Ext.test');
  2.  
  3. Ext.test.Panel = function() {
  4.  
  5. 	this.left = new Ext.Panel({
  6. 				id : 'left',
  7. 				border : true,
  8. 				bodyStyle : 'padding: 5px',
  9. 				defaults : {
  10. 					style : 'margin-bottom: 5px',
  11. 					draggable : {
  12. 						insertProxy : false,
  13. 						onDrag : function(e) {
  14. 							var pel = this.proxy.getEl();
  15. 							this.x = pel.getLeft(true);
  16. 							this.y = pel.getTop(true);
  17.  
  18. 							var s = this.panel.getEl().shadow;
  19. 							if (s) {
  20. 								s.realign(this.x, this.y, pel.getWidth(), pel
  21. 												.getHeight());
  22. 							}
  23. 						},
  24. 						endDrag : function(e) {
  25. 							this.panel.setPosition(this.x, this.y);
  26. 						}
  27. 					}
  28. 				},
  29. 				items : [{
  30. 							id : 'panel1',
  31. 							html : 'Panel 1'
  32. 						}, {
  33. 							id : 'panel2',
  34. 							html : 'Panel 2'
  35. 						}, {
  36. 							id : 'panel3',
  37. 							html : 'Panel 3'
  38. 						}, {
  39. 							id : 'panel4',
  40. 							html : 'Panel 4'
  41. 						}, {
  42. 							id : 'panel5',
  43. 							html : 'Panel 5'
  44. 						}]
  45. 			});
  46.  
  47. 	this.right = new Ext.Panel({
  48. 				border : true,
  49. 				id : 'right',
  50. 				bodyStyle : 'padding: 5px',
  51. 				defaults : {
  52. 					bodyStyle : 'padding-left: 5px'
  53. 				}
  54. 			});
  55.  
  56. 	this.right.on('render', this.onRightRender, this);
  57.  
  58. 	Ext.test.Panel.superclass.constructor.call(this, {
  59. 				renderTo : 'pageContainer',
  60. 				bodyStyle : 'padding: 5px',
  61. 				height : 500,
  62. 				width : 760,
  63. 				title : 'Demo',
  64. 				layout : 'table',
  65. 				defaults : {
  66. 					height : 200,
  67. 					width : 200
  68. 				},
  69. 				items : [this.left, this.right]
  70. 			});
  71. };
  72.  
  73. Ext.extend(Ext.test.Panel, Ext.Panel, {
  74. 			onRightRender : function(cmp) {
  75. 				var sourcePanelDropTarget = new Ext.dd.DropTarget(cmp.body.dom,
  76. 						{
  77. 							notifyDrop : function(ddSource, e, data) {
  78. 								cmp.add(ddSource.panel);
  79. 								cmp.doLayout();
  80. 								return (true);
  81. 							}
  82. 						});
  83. 			}
  84. 		});
  85.  
  86. Ext.onReady(function() {
  87. 			Ext.QuickTips.init();
  88. 			var panel = new Ext.test.Panel();
  89. 		});

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.