Firefox, IE, Safari drag and drop compatibility.

[getbogged]

I am creating multiple grids inside of a panel and have them being able to be dragged and dropped to each other. For my base grids with my data i am using this



var store = Ext.create('Ext.data.Store', {
model: 'DataObject',
data: adata
});

var rround = "panel-game-"+round;
var ss = Ext.create('Ext.grid.Panel', {
stateful: true,
id: "panel-game-"+round,
stateId: 'stateGrid',
autoScroll: false,
store: store,
columns: [
{
text : 'Teams',
flex : 1,
sortable : true,
dataIndex: 'team_name'
}
],
height: 100,
width: 150,
title: 'Game ' + round,
viewConfig: {
stripeRows: true,
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: ["draggroup","dropgroup"],
dropGroup: ["draggroup","dropgroup"]
},
listeners: {
drop: function(node, data, dropRec, dropPosition,record,store) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
var data = this.store.data.items;
var sdata = new Array();
data.each(function(e){
var bleh = {team_id: e.data.team_id, team_name:e.data.team_name};
sdata.push(bleh);
})

console.log(sdata);

removeDupe(sdata,this.store); } } }
});





This is used to create blank grids


var rCellStore = Ext.create('Ext.data.Store', {
model: 'DataObject'
});


var rCell = Ext.create('Ext.grid.Panel', {
stateful: true,
id: "panel-game-"+i+'-'+a,
stateId: 'stateGrid',
autoScroll: false,
store: rCellStore,
columns: [
{
text : 'Teams',
flex : 1,
sortable : true,
dataIndex: 'team_name'
}
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: ["draggroup","dropgroup"],
dropGroup: ["draggroup","dropgroup"]
},
listeners: {
drop: function(node, data, dropRec, dropPosition, record) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('title') : ' on empty view';
var f = node.id.replace('-body','');
var newval = data.records[0].data;

if(f != undefined && f != ''){
var fstore = Ext.getCmp(f).getStore();
fstore.add(newval);
}

var data = this.store.data.items;
var sdata = new Array();
data.each(function(e){
var bleh = {team_id: e.data.team_id, team_name:e.data.team_name};
sdata.push(bleh);
})

// console.log(sdata);

removeDupe(sdata,this.store);


}
}
},
height: 100,
width: 150,
title: 'Game ',
viewConfig: {
stripeRows: true
}
});




items.push({html: '<id="'+i+'-'+a+'"></id> ', items: [rCell]});


This works perfectly in chrome as i can drag and drop to anywhere form anywhere. When using IE, Safari, or FF they will only drag within the original grids that already have data in them.

[scottmartin]

Do you receive an error in the console? What happens of you set a breakpoint in your drop listener in Firebug, does everything populate as expected?

Regards,
Scott.

[getbogged]

It breaks on

ext-all-debug.js





81080 me.callParent([me.view.el]);





But if i turn it off it will continue and input all the data into the correct places. It will drag and drop just fine into other grids that have data. But it won't let me drop in the empty grids w/o a console error. It is acting if the grid is not dropable.

Edit: I would also like to add the api says the dragGroup and dropGroup will only accept a string but it does also accept an array which i was using but changed it here just to see if it was a problem. It was not. Just fyi

Edit2: If i turn firebug off and then turn it back on after the page loads correctly i get this error that runs infinitely.

attempt to run compile-and-go script on a cleared scope


chrome://firebug/content/blank.gif
clearInterval(id);ext-all-debug.js (line 10470)






attempt to run compile-and-go script on a cleared scope

[getbogged]

bump. Its weird that it works for chrome but not for the rest

[getbogged]

Shameless bump again. I found out that firebug breaks my extjs so i am using a different development tool and i get no errors. I think its not even creating a drop zone for the grids. I thought it was because the grids were empty to being with but that is not the problem either. I am quite stuck. Anyone have any advice?

Solution: I checked the dom and found out the blank grid was not getting my dragdrop groups value. I had another viewconfig{stripeRows:true} at the end of that. I removed that and it worked. The second viewconfig was overwritting my first one. It seems chrome can figure it out but the rest can't.