PHP Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.3.1/ext-all-debug.js"></script>
<script type="text/javascript">
// Path to the blank image should point to a valid location on your server
Ext.BLANK_IMAGE_URL = 'ext-3.3.1/resources/images/default/s.gif';
Ext.ns('WebApp.Filter');
//DragPanel
WebApp.Filter.DragPanel = Ext.extend(Ext.Panel, {
frame: true,
collapsible: true,
initComponent: function () {
WebApp.Filter.DragPanel.superclass.initComponent.call(this);
},
afterRender: function () {
WebApp.Filter.DragPanel.superclass.afterRender.call(this, arguments);
var parentId = this.ownerCt.body.id;
this.dd = new Ext.dd.DD(this);
this.dd.startDrag = function (x, y) {
this.DDM.dragCurrent.constrainTo(parentId, { left: 0, right: -200, top: 0, bottom: -200 });
};
this.dd.onDrag = function (e) {
var panelEl = Ext.fly(e.getTarget()).up('div.x-panel', 10);
if (!panelEl || panelEl == null)
return;
var panel = Ext.getCmp(panelEl.id);
if (panel.linkers) {
for (var i = 0; i < panel.linkers.length; i++) {
panel.linkers[i].reDrawLink();
}
}
};
}
});
Ext.reg('xDragPanel', WebApp.Filter.DragPanel);
WebApp.Filter.Linker = Ext.extend(Ext.Component, {
panel1: undefined,
panel2: undefined,
panel1Half: {},
panel2Half: {},
h1Link: undefined,
h2Link: undefined,
vLink: undefined,
lineWeight: 2,
tpl: new Ext.Template("<div style='display:block;' >",
"<div class='x-link-h1' style='overflow:hidden; position:absolute; left:{h1_left}px; top:{h1_top}px; width:{h1_width}px; height:{h1_height}px; background-color: red;'></div>",
"<div class='x-link-v' style='overflow:hidden; position:absolute; left:{v_left}px; top:{v_top}px; width:{v_width}px; height:{v_height}px; background-color: green;'></div>",
"<div class='x-link-h2' style='overflow:hidden; position:absolute; left:{h2_left}px; top:{h2_top}px; width:{h2_width}px; height:{h2_height}px; background-color: blue;'></div>",
"</div>"),
initComponent: function () {
this.initPanel(this.panel1);
this.initPanel(this.panel2);
WebApp.Filter.Linker.superclass.initComponent.call(this);
},
initPanel: function (panel) {
if (!panel)
throw "Panel required."
if (!panel.linkers) {
panel.linkers = [];
}
panel.linkers.push(this);
panel.halfWidth = parseFloat(panel.getWidth() / 2);
},
reDrawLink: function () {
var dims = this.linkRedim();
this.h1Link.setPositioning({ left: dims.h1.x, top: dims.h1.y, width: dims.h1.width });
this.h2Link.setPositioning({ left: dims.h2.x, top: dims.h2.y, width: dims.h2.width });
this.vLink.setPositioning({ left: dims.v.x, top: dims.v.y, height: dims.v.height });
},
linkRedim: function () {
var pos1 = this.panel1.getPosition(true)
var pos2 = this.panel2.getPosition(true)
var p1 = {
x: pos1[0] + this.panel1.halfWidth,
y: pos1[1] + 5,
halfWidth: this.panel1.halfWidth
};
var p2 = {
x: pos2[0] + this.panel2.halfWidth,
y: pos2[1] + 5,
halfWidth: this.panel2.halfWidth
};
var hPos = p2.x > p1.x ? true : false;
var vPos = p2.y > p1.y ? true : false;
var hLen = Math.abs(p2.x - p1.x);
var vLen = Math.abs(p2.y - p1.y) + this.lineWeight;
var hBoxDist = hLen - p2.halfWidth - p1.halfWidth;
var hBoxDistBy2 = Math.abs(parseFloat(hBoxDist / 2));
var minLinkLen = Math.abs(parseFloat(p1.halfWidth - p2.halfWidth)) + 10;
var h1 = { x: 0, y: p1.y, width: hBoxDistBy2, height: this.lineWeight };
var h2 = { x: 0, y: p2.y, width: hBoxDistBy2, height: this.lineWeight };
var v = { x: 0, y: p2.y, width: this.lineWeight, height: vLen };
if (vPos) v.y = p1.y;
if (hPos) {
h1.x = p1.x + p1.halfWidth;
h2.x = p1.x + p1.halfWidth + hBoxDistBy2;
v.x = h2.x;
if (hBoxDist <= 1) {
hBoxDist = hLen - p1.halfWidth + p2.halfWidth + minLinkLen;
h1.x = p1.x + p1.halfWidth;
h1.width = hBoxDist;
h2.x = p2.x + p2.halfWidth;
h2.width = minLinkLen;
v.x = p1.x + p1.halfWidth + hBoxDist;
if (vPos) v.y = p1.y;
}
}
else {
h1.x = p2.x + p2.halfWidth + hBoxDistBy2;
h2.x = p2.x + p2.halfWidth;
v.x = h1.x;
if (hBoxDist <= 1) {
hBoxDist = hLen - p1.halfWidth + p2.halfWidth + minLinkLen;
h1.x = p2.x - p2.halfWidth - minLinkLen;
h1.width = hBoxDist;
h2.x = h1.x;
h2.width = minLinkLen;
v.x = h1.x;
if (vPos) v.y = p1.y;
}
}
if (v.height == 0) v.height = 1; //IE bug fix
return { h1: h1, h2: h2, v: v };
},
onRender: function (ct) {
var dims = this.linkRedim();
var conf = {
h1_left: dims.h1.x,
h1_top: dims.h1.y,
h1_width: dims.h1.width,
h1_height: dims.h1.height,
h2_left: dims.h2.x,
h2_top: dims.h2.y,
h2_width: dims.h2.width,
h2_height: dims.h2.height,
v_left: dims.v.x,
v_top: dims.v.y,
v_width: dims.v.width,
v_height: dims.v.height
};
this.el = this.tpl.append(ct, conf);
WebApp.Filter.Linker.superclass.onRender.apply(this, arguments);
this.h1Link = Ext.select('#' + this.el.id + '> .x-link-h1').first();
this.h2Link = Ext.select('#' + this.el.id + '> .x-link-h2').first();
this.vLink = Ext.select('#' + this.el.id + '> .x-link-v').first();
},
destroy: function () {
this.panel1 = null;
this.panel2 = null;
Ext.fly(this.h1Link).remove();
Ext.fly(this.h2Link).remove();
Ext.fly(this.vLink).remove();
Ext.fly(this.el).remove();
WebApp.Filter.Linker.superclass.destroy.apply(this, arguments);
}
});
Ext.reg('xLinker', WebApp.Filter.Linker);
Ext.ns('WebApp');
WebApp.workspace = function () {
return {
viewPort: {},
init: function () {
this.viewPort = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'west',
title: 'Item list',
width: 200,
items: [
{
xtype: 'button',
text: 'Press Me',
scope: this,
handler: this.addPanel
}
]
},
{
region: 'center',
layout: 'border',
items: [
{
xtype: 'panel',
id: 'workSurface',
region: 'center',
title: 'Work Surface',
layout: 'absolute',
autoScroll: true
},
{
region: 'south',
title: 'Criteria',
height: 250
}
]
}
]
});
},
addPanel: function () {
var workSurface = Ext.getCmp('workSurface');
var panelA = new WebApp.Filter.DragPanel({
title: 'Panel A',
x: 50,
y: 100,
height: 200,
width: 150
});
workSurface.add(panelA);
var panelB = new WebApp.Filter.DragPanel({
title: 'Panel B ',
x: 500,
y: 100,
height: 200,
width: 150
});
workSurface.add(panelB);
workSurface.doLayout();
var link = new WebApp.Filter.Linker({
xtype: 'xlinker',
panel1: panelA,
panel2: panelB
});
workSurface.add(link);
workSurface.doLayout();
}
};
} ();
Ext.onReady(WebApp.workspace.init, WebApp.workspace);
</script>
</head>
<body>
</body>
</html>
Drag and Drop inside panels with scrolling
Progress
