JavaScript Extjs面板拖放

Posted 2021-05-19

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);

							var s = this.panel.getEl().shadow;
							if (s) {
								s.realign(this.x, this.y, pel.getWidth(), pel
												.getHeight());
							}
						},
						endDrag : function(e) {
							this.panel.setPosition(this.x, this.y);
						}
					}
				},
				items : [{
							id : 'panel1',
							html : 'Panel 1'
						}, {
							id : 'panel2',
							html : 'Panel 2'
						}, {
							id : 'panel3',
							html : 'Panel 3'
						}, {
							id : 'panel4',
							html : 'Panel 4'
						}, {
							id : 'panel5',
							html : 'Panel 5'
						}]
			});

	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();
		});