PDA

View Full Version : I need to delay the drop event



Neopulse
5 Nov 2013, 12:10 PM
I try to drag a row from to one grid to another (the easy part), but there are several field in the target grid that need to be fill before insert the record in the DB, so I need open a form, load the record into it, and fill the field that I need to have, the trouble is the store didīnt wait, it insert the record immediately.


beforedrop: function(node, data, dropRec, dropPosition, dropFunction, dropHandlers) {
var usuario = data.records[0]
wdsVisit = Ext.create('ControLab.view.wdsSentar');
wdsVisit.down('form').loadRecord(usuario);
wdsVisit.show();

},


Digging in the api i found in the Ext.grid.plugin.DragDrop documentation




view.on('beforedrop',function(node, data, overModel, dropPosition, dropHandlers){// Defer the handling dropHandlers.wait =true;Ext.MessageBox.confirm (http://localhost/extjs/index.html#!/api/Ext.MessageBox-method-confirm)('Drop','Are you sure',function(btn){if(btn ==='yes'){ dropHandlers.processDrop();}else{ dropHandlers.cancelDrop();}});});
I thin it a way to delay the drop action until i make some customization, but i don't know were and how to use this.
I read: Uncaught ReferenceError: view is not defined

Anybody have another idea to accomplish this???
Excuse my english please

Piruthu
6 Nov 2013, 2:48 AM
Try using 'dropFunction.cancelDrop()' before opening the form. This way the store will not get updated immediately.


beforedrop: function(node, data, dropRec, dropPosition, dropFunction, dropHandlers) {
dropFunction.cancelDrop();
var usuario = data.records[0]
wdsVisit = Ext.create('ControLab.view.wdsSentar');
wdsVisit.down('form').loadRecord(usuario);
wdsVisit.show();
}

Neopulse
8 Nov 2013, 9:57 AM
I made it a couple of day ago, thank very much, I put it here, it may help somebody else
in the listener of the grid


listeners: {
beforedrop: function(node, data, dropRec, dropPosition, dropHandlers) {
var usuario = data.records[0]; //the dragged record
dropHandlers.wait = true; //make wait and drop action
//Show the form to complete the fields
wdsVisit = Ext.create('ControLab.view.wdsSentar');
wdsVisit.down('form').loadRecord(usuario);
wdsVisit.show();
//cancel de drop action, Cancel after show the modal form, to hide the rolling back animation of the record.
dropHandlers.cancelDrop();
}
}


Then in the controler I made


Ext.define('ControLab.controller.visita', {
extend: 'Ext.app.Controller',
.......
salvaVisita:function(p_button) {
var v_win = p_button.up('window'); //the opened window
var v_form = v_win.down('form'); //the form
var v_record = v_form.getRecord();// the record
var v_values = v_form.getValues(); //the values
var v_store = this.getStore('storeVisita');//the store

if (v_form.isValid()){ //if the forms is valid
//Make a record from the same model of the store of the expected droped grid
var visita = Ext.create('ControLab.model.modVisita', {
idusuario : v_values.id,
idpc : v_values.idpc,
fecha : v_values.fecha,
entrada : v_values.entrada,
visitNotas : v_values.notasV,
});

v_store.add(visita) //write the record in the store
v_win.close(); //close the windows form

//an 0.5 delay to reload the store of the droped grid to let the page write in the DB (not recommended for internet application, my systems it's in a high speed intranet)
//I know its not perfect but it was the best i could made
setTimeout(function(){
v_store.load()//reload the store
},500);

}else{
//console.log(v_record);
//maybe show some alert message about the client side validation fail and not to close the form to let the user correct
}
},
....
}


excuse my english please