PDA

View Full Version : DataView Drag Issue: After creating first Portlet into Portal from DataView



amitkrgarg
7 Apr 2010, 1:24 PM
Hi Guys,
I am able to render one dataview and one Portal inside the ViewPort Container. I am able to drag dragData from DataView and drop successfully into Portal. This drag and drop works for the first time. The code is able to create a new Portlet inside the Portal. Now, next time i try to drag data from DataView, the Drag functionality is not working.

Please guide me.

//*********************** Code Starts*******************************
Ext.onReady(function() {
var html = [
'<p><h1>Heading One</h1>',
'<h2>Heading Two</h2>',
'<p>This is a paragraph with <strong>STRONG</strong>, <em>EMPHASIS</em> and a <a href="#">Link</a></p>',
'<table>',
'<tr>',
'<td>Table Column One</td>',
'<td>Table Column Two</td>',
'</tr>',
'</table>',
'<ul>',
'<li>Un-ordered List-item One</li>',
'<li>Un-ordered List-item One</li>',
'</ul>',
'<ol>',
'<li>Ordered List-item One</li>',
'<li>Ordered List-item Two</li>',
'</ol>',
'<blockquote>This is a blockquote</blockquote></p>'
];
var portlet1 = new Ext.ux.Portlet({
title: 'Portlet 1',
collapsible: true,
autoHeight: true,
draggable: true,
html: html,
border: true,
collapsible: true,
split: true,
tools: tools,
cls: 'x-portal-header'
//width:200
//autoLoad: {url: 'some url', scripts: true}
});
var portlet2 = new Ext.ux.Portlet({
title: 'Portlet 2',
collapsible: true,
autoHeight: true,
draggable: true,
html: html,
border: true,
collapsible: true,
split: true,
tools: tools,
cls: 'x-portal-header'
//width:200
//autoLoad: {url: 'some url', scripts: true}
});
var portlet3 = new Ext.ux.Portlet({
title: 'Portlet 3',
collapsible: true,
autoHeight: true,
draggable: true,
html: html,
border: true,
collapsible: true,
split: true,
tools: tools,
cls: 'x-portal-header'
//width:200
//autoLoad: {url: 'some url', scripts: true}
});
var portlet4 = new Ext.ux.Portlet({
title: 'Portlet 4',
collapsible: true,
autoHeight: true,
draggable: true,
html: html,
border: true,
collapsible: true,
split: true,
tools: tools,
cls: 'x-portal-header'
//width:200
//autoLoad: {url: 'some url', scripts: true}
});
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// create some portlet tools using built in Ext tool ids
var tools = [{
id: 'gear',
handler: function() {
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
}, {
id: 'close',
handler: function(e, target, panel) {
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
}];
var tpl = new Ext.XTemplate(
'<tpl for=".">' +
'<div class="patient-source">' +
'<table><tbody>' +
'<tr><td class="patient-label">Emp ID</td><td class="patient-label">{Emp_id}</td></tr>' +
'<tr><td class="patient-label">First Name</td><td class="patient-label">{FName}</td></tr>' +
'<tr><td class="patient-label">Last Name</td><td class="patient-label">{LName}</td></tr>' +
'<tr><td class="patient-label">City</td><td class="patient-label">{City}</td></tr>' +
'</tbody></table>' +
'</div><span class="x-editable">{shortName}</span></tpl><div class="x-clear"></div>');
var buttonData = [['001', 'JK R', 'Rhodes', 'BOS'], ['002', 'Kiran', 'Joseph', 'NY'], ['003', 'Warentt', 'Buff', 'LA']];
var dataStore = new Ext.data.ArrayStore({ fields: ['Emp_id', 'FName', 'LName', 'City'], data: buttonData }
);
var patientRecords = new Ext.DataView({
id: 'dataView',
cls: 'patient-view',
ddgroup: 'amit',
tpl: tpl,
itemSelector: 'div.patient-source',
overClass: 'patient-over',
selectedClass: 'patient-selected',
dropAllowed: "x-dd-drop-ok",
singleSelect: true,
store: dataStore,
listeners: {
render : function(v) {
v.dragZone = new Ext.dd.DragZone(v.getEl(), {
getDragData: function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10);
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
ddel: d,
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
sourceStore: v.store,
patientData: v.getRecord(sourceEl).data
}
}
},
getRepairXY: function() {
return this.dragData.repairXY;
}
});
v.dragZone.addToGroup('amit');
},
activate: function(p) {
p.reload();
}
}
});
var myPortal_old = new Ext.ux.Portal({
id: 'myportal',
xtype: 'portal',
cls: 'x-panel-body',
margins: '35 5 5 0',
ddgroup: 'amit',
items: [{
columnWidth: .33,
style: 'padding:10px 0 10px 10px',
items: [{
//style:'padding:10px 0 10px 10px',
cls: 'x-portal-header',
items: portlet1
}]
}, {
columnWidth: .33,
style: 'padding:10px 0 10px 10px',
items: [//4
{
//style:'padding:10px 0 10px 10px',
cls: 'x-portal-header',
items: portlet2
}, {
cls: 'x-portal-header',
items: portlet3
}]//4 close
},
{
columnWidth: .33,
style: 'padding:10px 0 10px 10px',
items: [//5
{
cls: 'x-portal-header',
items: portlet4
}] //5 close
}] //2 close
});
var myPortal = new Ext.ux.Portal({
id: 'myportal',
xtype: 'portal',
cls: 'x-panel-body',
margins: '35 5 5 0',
ddgroup: 'amit',
listeners: {
render: function(panel) {
var dropTarget = new Ext.dd.DropTarget(panel.body, {
ddGroup: 'amit',
copy: false,
overClass: 'over',
notifyDrop: function(dragSource, event, data) {
//Ext.fly(panel.getEl()).frame("00AE00");
if (dragSource.id = 'dataview') {
var record = data.patientData;
//if (!this.copy)
NewPortlet(record);
//this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
//dragSource.getRepairXY();
//dragSource.dragging = true;
//dragSource.afterDragDrop = function() {panel.getEl().doLayout();};
return true;
}
},
notifyDropover: function() {

},
unreg: function() {
//Ext.dd.ScrollManager.unregister(this.portal.body);
Ext.ux.Portal.DropZone.superclass.unreg.call(this);
},
validateDrop : function() {
},
beforeDrop : function() {
},
notifyOut : function(dd, e, data){
delete this.grid;
dd.proxy.getProxy().remove();
}
});
}
},
items: [//2
{columnWidth: .33, style: 'padding:10px 0 10px 10px', items: portlet1 },
{ columnWidth: .33, style: 'padding:10px 0 10px 10px', items: portlet2 },
{ columnWidth: .33, style: 'padding:10px 0 10px 10px', items: portlet4 },
{ columnWidth: .33, style: 'padding:10px 0 10px 10px', items: portlet3 }
] //2 close
});
new Ext.Viewport(
{
id: 'viewPort',
layout: 'hbox',
cls: 'x-panel',
layoutConfig: { align: 'stretch' },
items: [ //1
{
region: 'west',
title: 'Employees',
cls: 'app-header',
width: 200,
ddGroup: 'amit',
split: true,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '35 0 5 5',
//cmargins:'35 5 5 5',
//layout:'accordion',
layoutConfig: {
animate: true
},
items: [patientRecords /*, {
buttons: [{ text: 'New Portlet', handler: function(e, target, panel) { NewPortlet(); } }, {
text: 'Alert', handler: function(e, target, panel) {
Ext.Msg.alert('Message', 'The Alert tool was clicked.');
}
}, { text: 'JSON Store', handler: function(e, target, panel) {
example();
}
}
]}*/]
}, myPortal] //1close
});
var NewPortlet = function(data) {
if (Ext.getCmp('newPortlet'))
return true;
{
var portlet = new Ext.ux.Portlet({
//xtype: 'portlet',
id: 'newPortlet',
title: 'New Portlet',
layout: 'absolute',
//collapsible: true,
//autoHeight: true,
//draggable: true,
html: html,
//border: true,
//split: true,
tools: tools,
cls: 'x-portal-header',
columnWidth: .33,
column: 0,
//stateEvents: ["move", "position", "drop", "hide", "show", "collapse", "expand", "columnmove", "columnresize", "sortchange"],
//stateful: true,
getState: function() {
alert("capturing state");
// return { collapsed: this.collapsed, hidden: this.hidden, column: this.ownerCt.id };
},
html: '<h1> First Name: ' + data.FName + '</h1><br><h3> Last Name: ' + data.LName + '</h3><br><h2> City: ' + data.City + '</h2>'
});
if (Ext.getCmp('myportal').items)
{
Ext.getCmp('myportal').items.add(portlet);
}
Ext.getCmp('myportal').doLayout();
return true;
}
}

//myPortal.dragZone.addToGroup('amit');
});
function initializePatientDragZone(v) {
v.dragZone = new Ext.dd.DragZone(v.getEl(), {
// On receipt of a mousedown event, see if it is within a draggable element.
// Return a drag data object if so. The data object can contain arbitrary application
// data, but it should also contain a DOM element in the ddel property to provide
// a proxy to drag.
getDragData: function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10);
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
ddel: d,
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
sourceStore: v.store,
patientData: v.getRecord(sourceEl).data
}
}
},
// Provide coordinates for the proxy to slide back to on failed drag.
// This is the original XY coordinates of the draggable element.
getRepairXY: function() {
return this.dragData.repairXY;
},
afterValidDrop: function() {
this.dragging = true;
this.dropStatus = "";
},
onNodeOver: function(target, dd, e, data) {
this.dragging = true;
return Ext.dd.DropZone.prototype.dropAllowed;
}
});
v.dragZone.addToGroup('amit');
}

function initializeHospitalDropZone(g) {
g.dropZone = new Ext.dd.DropZone(g.getView().scroller, {
// If the mouse is over a target node, return that node. This is
// provided as the "target" parameter in all "onNodeXXXX" node event handling functions
getTargetFromEvent: function(e) {
return e.getTarget('.hospital-target');
},
// On entry into a target node, highlight that node.
onNodeEnter: function(target, dd, e, data) {
Ext.fly(target).addClass('hospital-target-hover');
},
// On exit from a target node, unhighlight that node.
onNodeOut: function(target, dd, e, data) {
Ext.fly(target).removeClass('hospital-target-hover');
},
// While over a target node, return the default drop allowed class which
// places a "tick" icon into the drag proxy.
onNodeOver: function(target, dd, e, data) {
return Ext.dd.DropZone.prototype.dropAllowed;
},
// On node drop, we can interrogate the target node to find the underlying
// application object that is the real target of the dragged data.
// In this case, it is a Record in the GridPanel's Store.
// We can use the data set up by the DragZone's getDragData method to read
// any data we decided to attach.
onNodeDrop: function(target, dd, e, data) {
var rowIndex = g.getView().findRowIndex(target);
var h = g.getStore().getAt(rowIndex);
var targetEl = Ext.get(target);
targetEl.update(data.patientData.name + ', ' + targetEl.dom.innerHTML);
Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.name +
' on hospital ' + h.data.name);
return true;
}
});
}


function example() {
var exampleData = { 'exampleJSON': { 'exampleArray': [{ 'exampleID': 1, 'name': 'Fred', 'description': 'a guy' }, { 'exampleID': 2, 'name': 'sue', 'description': 'a girl'}]} };
var ExampleRecord = Ext.data.Record.create([
{ name: 'exampleID', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'description', type: 'string' }
]);
var exampleReader = new Ext.data.JsonReader({
root: "exampleJSON.exampleArray",
id: "exampleID"
}, ExampleRecord);
var exampleStore = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(exampleData),
data: exampleData,
reader: exampleReader
});
exampleStore.load();
exampleStore.each(function(aRecord) {
alert("Name is: " + aRecord.get('name'));
});
}
//*********************** Code End*******************************



Thanks,
Amit Garg