PDA

View Full Version : Drag and Drop between two different grids



mjhaston
22 Dec 2013, 8:27 AM
I'd like to drag from one grid and copy to another. I have the example working where there is one model and the plugin takes care of everything.



viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
dragGroup : 'firstGridDDGroup',
dropGroup : 'secondGridDDGroup'

},
allowCopy : true,
copy : true,
listeners : {
drop : function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
//Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
},



But I'm assuming that if you have two different models and stores then you have to take care of the drag and drop in custom code?

Is that correct and if so, are there any examples? I'm having a hard time finding them.




fields : [{
name : 'column_name'
}, {
name : 'column_text'
}, {
name : 'data_type'
}, {
name : 'length'
}, {
name : 'numeric_scale'
}, {
name : 'table_schema'
}, {
name : 'table_name'
}, {
name : 'system_table_name'
}, {
name : 'system_column_name'
}],





fields : [{
name : 'column'
}, {
name : 'text'
}, {
name : 'condition'
}, {
name : 'value'
}, {
name : 'data_type'
}, {
name : 'table'
}, {
name : 'schema'
}],

scottmartin
22 Dec 2013, 9:35 AM
You would just adjust the code where it gets the field names; data.records[0].get('name')

mjhaston
22 Dec 2013, 11:58 AM
Completely lost! Could I try and manually go in and grab the firstGrid record and try to populate the secondGrid record and then do a store.add(rec); ?


I guess I could be lazy and just make the models match. I'd have fields in each grid that weren't supposed to be there, but could be hidden!

Kevin Jackson
24 Dec 2013, 9:19 AM
Here's an example from our Training Course. I think it is what you are trying to do


https://fiddle.sencha.com/#fiddle/2cc

mjhaston
25 Dec 2013, 3:47 PM
Making progress. I've extended 3 different grids. All seem to be working and have unique id's and itemID's. I have a feeling that I'm not defining the firstGrid and secondGrid correctly for drag and drop. I have a feeling that I need to deal with ...


initComponent: function()

Maybe someone a lot smarter than me can tell me? I'm trying to define the drag and drop groups when I create the firstGrid and secondGrid so that I can name the drag and drop zone. Everything appears correctly in the viewport with no errors, but I'm not able to drop anything from the firstGrid to secondGrid.








if (!exist) {
tabpanel.add({
xtype : 'my-tab',
title : itemClicked + '-tab',
id : itemClicked + '-tab',
closable : true,
closeAction : 'hide',
items : [{
xtype : 'dynamicgrid',
id : itemClicked + '-results',
itemID : itemClicked + '-results',
title : itemClicked + ' Results',
iconCls : 'icon-application_view_list',
store : MyStore,
region : 'center',
rowNumberer : true,
frame : false,
border : true,
split : true,
flex : 1,
layout : 'fit',
checkboxSelModel : false,
autoScroll : true
}, {
region : 'east',
split : true,
frame : false,
border : false,
width : 250,
layout : {
type : 'vbox',
align : 'stretch'
},
items : [{
xtype : 'first-grid',
title : itemClicked + '-first-grid',
id : itemClicked + '-first-grid',
itemID : itemClicked + '-first-grid',
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
dragGroup : itemClicked + '-firstGridDDGroup',
dropGroup : itemClicked + '-secondGridDDGroup'

},
allowCopy : true,
copy : true,
listeners : {
drop : function(node, data, dropRec, dropPosition) {
console.log(data, dropRec)
//var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
//Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
}
}, {
xtype : 'second-grid',
title : itemClicked + '-second-grid',
id : itemClicked + '-second-grid',
itemID : itemClicked + '-second-grid',
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
//dragGroup : itemClicked + '-secondGridDDGroup',
dropGroup : itemClicked + '-firstGridDDGroup'

},
allowCopy : true,
copy : true,
listeners : {
drop : function(node, data, dropRec, dropPosition) {
console.log(data, dropRec)
//var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
//Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
}
}]

}]
});
//Ext.ComponentQuery.query('#tab')[i].setTitle(itemClicked);
Ext.ComponentQuery.query('#tabpanel')[0].setVisible(true);
tabpanel.setActiveTab(i);
MyStore.load();
}

QuantumScripting
26 Dec 2013, 8:00 AM
I am having this same issue. I can drag from my first grid to second, but not vice versa. I can't even make selections in my second grid.

maxatsmstid
7 Sep 2017, 11:16 AM
Hi
I have tried to add in a rest store to store the date
I share the same model
But have two different stores
And in the store I define the ur for saving the date

I only get delete request but no post request when records are moved from one grid to the second grid