PDA

View Full Version : Drag and Drop write to database : Coding BrainFreeze



Tumac
9 Apr 2010, 10:39 AM
I am using the code from Saki's examples and have created my drag and drop grids.

http://examples.extjs.eu/ddgrids.js

I am successfully able to drag and drop data from one grid to the other.

The trick now is that, when I drop a row into the Drop Target Grid, I want to write that row to the database.

In Saki's code he has the following line.




/**
* Called when records are dropped on this grid
* @param {Ext.grid.GridPanel} srcGrid The source grid
* @param {Array} records Array of dropped records
*/
,onRecordsDrop:Ext.emptyFn

I am assuming i can replace Ext.emptyFn with a real function to write to database. Problem is I am freezing up when trying to implement. Would I do something like this?



onRecordsDrop: function () {
var record = this.getSelectionModel().getSelectedValues();
store.save(record);
}

9 Apr 2010, 10:58 AM
create a function, and look at what is passed. It should pass the record, send that to the server via ajax request or something.

Tumac
9 Apr 2010, 11:06 AM
I guess where I am having my freeze is that I have really only sent form data via Ajax - ie

form.IsValid;
form.GetValues.submit(
Ajax call

Can you give me a hint on how to get values of the dropped record?

if I do this, it did not give me the whole record just the first column value



,onRecordsDrop: function () {
var record = this.selModel.getSelections();
this.store.save(record);
}


As well extjs blows up because I have not defined a writer for the store. Setting that up now.

9 Apr 2010, 11:08 AM
OK, then check out my Ajax article at: http://www.extjs.com/learn/Manual:Core:Ext.Ajax

Tumac
9 Apr 2010, 12:41 PM
,onRecordsDrop: function () {
var record = this.selModel.getSelections();
this.dropAjax(record);
}
,dropAjax: function (record) {
Ext.Ajax.request({
url : '?c=deliverydetail&m=setDetail'
,params : {
tallyID: record.tallyID
,skuID: record.skuID
}
,method: 'POST'
,success: ''
,failure: ''
});
}


When I drop the record into the dropGrid, it fires the AJAX call, but my record is null so it doesn't do anything.

I am failing something here to pick up the values of the record I just dropped into the grid. I am sure it is 101.....

9 Apr 2010, 5:42 PM
The selection model doesn't really have a selection. You can drag and drop before a selection is made.

take a look at my drag and drop example at http://extjsinaction.com/examples/chapter14

It doesn't have the ajax request built in, but there should be a comment with a placeholder.

Tumac
11 Apr 2010, 12:14 PM
I looked at the example and looked back at you book chapters.

I have stuck with my original DD code from Saki's example and am getting the data passed, but cannot pick it up. I output to console.log and have attached screenshot.

Will keep hacking at it, but how do I extract the values of "data" - I can see them but cannot get them into a param that I can send with my Ajax call.

Saki's Code:



,onContainerDrop:function(dd, e, data) {
if(dd.grid !== this.grid) {
this.grid.store.add(data.selections);
Ext.each(data.selections, function(r) {
dd.grid.store.remove(r);
});
this.grid.onRecordsDrop(dd.grid, data.selections);
return true;
}
else {
return false;
}
} // eo function onContainerDrop


My Code


,onRecordsDrop: function (grid,data) {
console.log(data);
var tallyID = data.tallyID
Ext.Ajax.request({
url : '?c=deliverydetail&m=setDetail'
,params : {
tallyID : tallyID

}
,method: 'POST'
,success: ''
,failure: ''
});


i have tried several ways to get at this data, this cut of code is just the latest. For var tallyID=data.tallyID, it comes up null.

Tumac
13 Apr 2010, 2:21 PM
Ajax is not setup to send array yet if multiple ID's are dropped, but I figured out the object was an array and how to crack it.

Thanks again!

,onRecordsDrop: function (grid, data) {

for($i=0; $i<data.length;$i++) {
var tid = data[$i]['id'];
}

Ext.Ajax.request({
url : '?c=deliverydetail&m=setDetail'
,params : {
,tallyID: tid
}
,method: 'POST'
,success: ''
,failure: ''
});
}
}