PDA

View Full Version : drag & drop into window



onGoing
27 Apr 2009, 12:55 AM
Hi,
Problem. Follow functional is works excellent separately. But if its contain into the window object (see second fragment of code) then drag & drop functional is fall.





// declare the source Grid
var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
columns : cols_left,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 295,
region : 'west',
});

// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDDGroup',
store : secondGridStore,
columns : cols_right,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 295,
region : 'center',
});

//Simple 'border layout' panel to house two grids
var displayPanel = new Ext.Panel({
layout : 'border',
items : [
firstGrid,
secondGrid
],
bbar : [
'->', // Fill
{
text : ' ?? ',
style: 'margin-right:60px',
handler : function() {
// submit action
}
},
{
text : '??????',
style: 'margin-right:140px',
handler : function() {
// cancel action
}
},
{
text : '????????',
style: 'margin-right:20px',
handler : function() {
//refresh source grid
firstGridStore.loadData(myData);

//purge destination grid
secondGridStore.removeAll();
}
}
]
});

....
....

/* Setup Drop Targets */

// This first instruction for first grid doesn't work into the window (see next code) !!!!!
var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];

var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'firstGridDDGroup',
copy : true,
notifyDrop : function(ddSource, e, data){

// Generic function to add records.
function addRow(record, index, allItems) {

// Search for duplicates
var foundItem = firstGridStore.find('name', record.data.name);
// if not found
if (foundItem == -1) {
firstGridStore.add(record);

// Call a sort dynamically
firstGridStore.sort('name', 'ASC');

//Remove Record from the source
ddSource.grid.store.remove(record);
}
}

// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});


// This first instruction for second grid doesn't work into the window (see next code) !!!!!!
var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1];

var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
copy : false,
notifyDrop : function(ddSource, e, data){

// Generic function to add records.
function addRow(record, index, allItems) {

// Search for duplicates
var foundItem = secondGridStore.find('name', record.data.name);
// if not found
if (foundItem == -1) {
secondGridStore.add(record);
// Call a sort dynamically
secondGridStore.sort('name', 'ASC');

//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});



var button = Ext.get('show-btn');

button.on('click', function(){


var win = new Ext.Window({
closable : true,
width : 600,
height : 350,
border : false,
plain : true,
layout : 'fit',
items : [displayPanel]
});

win.show(button);
});