Posted By

arunpjohny on 10/18/08

Tagged

Versions (?)

Last Edited at 10/18/08 12:04am

Statistics

Viewed 765 times

Favorited by 0 user(s)

Related snippets

Extjs Panel Drag and Drop

/ Published in: JavaScript

This example gives a idea about how to create a simple panel which can be dragged and dropped into another panel

Highlighted TextExpand

Ext.namespace('Ext.test');

Ext.test.Panel = function() {

this.left = new Ext.Panel({
				id : 'left',
				border : true,
				bodyStyle : 'padding: 5px',
				defaults : {
					style : 'margin-bottom: 5px',
					draggable : {
						insertProxy : false,
						onDrag : function(e) {
							var pel = this.proxy.getEl();
							this.x = pel.getLeft(true);
							this.y = pel.getTop(true);

this.right = new Ext.Panel({
				border : true,
				id : 'right',
				bodyStyle : 'padding: 5px',
				defaults : {
					bodyStyle : 'padding-left: 5px'
				}
			});

this.right.on('render', this.onRightRender, this);

Ext.test.Panel.superclass.constructor.call(this, {
				renderTo : 'pageContainer',
				bodyStyle : 'padding: 5px',
				height : 500,
				width : 760,
				title : 'Demo',
				layout : 'table',
				defaults : {
					height : 200,
					width : 200
				},
				items : [this.left, this.right]
			});
};

Ext.extend(Ext.test.Panel, Ext.Panel, {
			onRightRender : function(cmp) {
				var sourcePanelDropTarget = new Ext.dd.DropTarget(cmp.body.dom,
						{
							notifyDrop : function(ddSource, e, data) {
								cmp.add(ddSource.panel);
								cmp.doLayout();
								return (true);
							}
						});
			}
		});

Ext.onReady(function() {
			Ext.QuickTips.init();
			var panel = new Ext.test.Panel();
		});

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.