[solved] How to submit data from drag and drop grids

[kers]

Hi,

i have taken the drag and rop between grids example and have it mostly working with our setup, but I am unsure how to submit this changes to the database.


Ext.ns('itkb.innerSoftwarePatch');

itkb.innerSoftwarePatch.reader = function () {
var cfg = {
fields: ['id', 'software_id', 'patch_id', 'pt_id', {
name: 'from_date',
type: 'date',
dateFormat: 'c'
},
'name', 'modified_by', 'modified_date', 'description', 'version', 'sub_version', 'build_number', {
name: 'date_available',
type: 'date',
dateFormat: 'c'
}]
};
return itkb.entity.reader(cfg);
}

itkb.innerSoftwarePatch.firstStore = function (config) {
var cfg = Ext.apply({},
config, {
entity: 'software_patches_applied',
reader: itkb.innerSoftwarePatch.reader(),
sortInfo: {
field: 'name',
direction: 'asc'
}
});
return itkb.entity.store(cfg);
}

itkb.innerSoftwarePatch.secondStore = function (config) {
var cfg = Ext.apply({},
config, {
entity: 'software_patches_available',
reader: itkb.innerSoftwarePatch.reader(),
sortInfo: {
field: 'name',
direction: 'asc'
}
});
return itkb.entity.store(cfg);
}

itkb.innerSoftwarePatch.demo = function (config) {

// Column Model shortcut array
var cols = [{
id: 'name',
header: "Name",
sortable: true,
dataIndex: 'name'
},
{
header: "Description",
width: 300,
sortable: true,
dataIndex: 'description'
},
{
header: "Version",
width: 100,
sortable: true,
dataIndex: 'version'
},
{
header: "Sub Version",
width: 100,
sortable: true,
dataIndex: 'sub_version'
},
{
header: "Build Number",
width: 100,
sortable: true,
dataIndex: 'build_number'
},
{
header: "Date Available",
width: 80,
sortable: true,
dataIndex: 'date_available',
xtype: 'datecolumn',
format: 'd/m/Y'
},
{
header: "Applied Date",
width: 80,
sortable: true,
dataIndex: 'from_date',
xtype: 'datecolumn',
format: 'd/m/Y'
}];

// declare the source Grid
var firstGrid = new Ext.grid.GridPanel({
id: 'firstGrid',
ddGroup: 'secondGridDDGroup',
store: itkb.innerSoftwarePatch.firstStore(config),
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
flex: 1,
title: 'Applied Software Patches'
});

// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
id: 'secondGrid',
ddGroup: 'firstGridDDGroup',
store: itkb.innerSoftwarePatch.secondStore(config),
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
flex: 1,
title: 'Available Software Patches'
});

//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
layout: 'vbox',
items: [
firstGrid, secondGrid],
bbar: [{
text: 'Drag and drop patch when it has been applied to the software'
}]

});

// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(itkb.innerSoftwarePatch.reader);

//Setup Drop Targets
// This will make sure we only drop to the view container
Ext.getCmp('firstGrid').on('render', function () {
var firstGridDropTargetEl = Ext.getCmp('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 = Ext.getCmp('firstGrid').getStore().findExact('id', record.data.name);
// if not found
if (foundItem == -1) {
Ext.getCmp('firstGrid').getStore().add(record);
// Call a sort dynamically
//Ext.getCmp('firstGrid').getStore().sort('name', 'ASC');
//Remove Record from the source
ddSource.grid.store.remove(record);

Ext.getCmp('firstGrid').submit({
url: 'cfc/actions.cfc',
params: {
method: 'add',
entity: 'software_patches_applied',
software_id: '1',
from_date: '',
patch_id: '3'
}
});

}
}

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

Ext.getCmp('secondGrid').on('render', function () {
// This will make sure we only drop to the view container
var secondGridDropTargetEl = Ext.getCmp('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 = itkb.innerSoftwarePatch.secondStore.findExact('name', record.data.name);
// if not found
//if (foundItem == -1) {
itkb.innerSoftwarePatch.secondStore.insert(record);
// Call a sort dynamically
itkb.innerSoftwarePatch.secondStore.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);
}
});
});

return displayPanel;
};Thanks for any help offered.

[jay@moduscreate.com]

you can do it on drop, send the ajax request over.

[kers]

cheers, kinda new to this and never thought about an ajax request, a few bits still to iron out with this but thats it saving to the datbase now.

[jay@moduscreate.com]

That's what I do :P

[ipreti]

you can do it on drop, send the ajax request over.

Hi Jgarcia,
Could you help me out pasting an example about how to do the ajax request on drop event?
I'd would be grateful.
Thanks in advance.
Ivan

[jay@moduscreate.com]

Where do you need help? Ajax or getting the data?

[ipreti]

I actually got the things working after some trying...
Thats what i did:




function loadListToField(store,fieldId){
var value = "";
var i=1;
store.data.each(function() {
value +=this.data['id'];
if(i!=store.getCount())
value+=',';
i++;
});
form.findById(fieldId).setValue(value);
}

function getGridToGridRecords(){
loadListToField(firstGridStoreStructure,"structures_Add");
loadListToField(firstGridStoreCustomer,"customers_Add");
loadListToField(firstGridStorePortfolio,"portfolios_Add");
loadListToField(secondGridStoreStructure,"structures_Remove");
loadListToField(secondGridStoreCustomer,"customers_Remove");
loadListToField(secondGridStorePortfolio,"portfolios_Remove");
}



I'm calling getGridToGridRecords function on form submit that fills hidden textfields with coma separated ids.. textfield to remove and one to add.
Is it a good way to do that?
My action using reflexion finds out my business class and calls add or remove depending on what collection im feeding with this ids... (removing collection or adding collection).

[jay@moduscreate.com]

This is making my head spin. I don't see why you are looping through all of the records

[ipreti]

I'll think it over and get back to you with a better answer.. =)
My first thought was getting all the records in and out to make sure that they would be added or removed correctly...
I guess i just need to get all the records from the database and compare with the collection that i have from the form.. the difference must be removed.
ill go through this all again and if i get stuck ill ask for help..thanks anyway!