Dnd Grid Panel inside TabPanel

[kenzogetwholestore]

Hello. Im having trouble with Grid Drag&Drop (getView().scroller.dom; is undefined) when I want to put it in tab and there's no way to make it work for me. Could you explain me how should i do that?


// declare the source Grid v
var firstGrid = new Ext.grid.GridPanel({
ddGroup: 'secondGridDDGroup',
store: firstGridStore,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
title: 'First Grid'
});
var secondGridStore = new Ext.data.JsonStore({
fields: fields,
root: 'records'
});
// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
ddGroup: 'firstGridDDGroup',
store: secondGridStore,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
title: 'Second Grid'
});

//Simple 'border layout' panel to house both grids v
ar displayPanel = new Ext.Panel({
width: 650,
height: 300,
layout: 'hbox',
defaults: {
flex: 1
},
layoutConfig: {
align: 'stretch'
},
items: [firstGrid, secondGrid]
});

var tabs = new Ext.TabPanel({
renderTo: 'panel',
activeTab: 0,
width: 600,
height: 250,
plain: true,
defaults: {
autoScroll: true
},
items: [{
title: 'Normal Tab',
items: [displayPanel]
}]
});
var blankRecord = Ext.data.Record.create(fields);
// This will make sure we only drop to the view scroller element
var firstGridDropTargetEl = firstGrid.getView().scroller.dom;
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup: 'firstGridDDGroup',
notifyDrop: function(ddSource, e, data) {
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
firstGrid.store.add(records);
firstGrid.store.sort('name', 'ASC');
return true
}
});

// This will make sure we only drop to the view scroller element
var secondGridDropTargetEl = secondGrid.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup: 'secondGridDDGroup',
notifyDrop: function(ddSource, e, data) {
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
secondGrid.store.add(records);
secondGrid.store.sort('name', 'ASC');
return true
}
});
});


I tried this way (http://www.sencha.com/forum/showthread.php?120125-DragDrop-problem) but it does not help.

Thanks for responds!

[Gary Schlosberg]

It would make it easier for others to see what might be going on if you could make the code a bit more readable.
http://jsbeautifier.org/

[kenzogetwholestore]

Here's my code:


var displayPanel = new Ext.Panel({
renderTo: width: 1195,
height: 255,
layout: 'hbox',
stripeRows: true,
defaults: {
flex: 1
}, //auto stretch
layoutConfig: {
align: 'stretch'
},
viewConfig: {
markDirty: false
},
items: [
firstGrid,
fileGrid
],
listeners: {
afterrender: function(comp) {
/*
var firstGridDropTargetEl = firstGrid.getView().scroller.dom;
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'firstGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;

if(record_temp != undefined)
{
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);


var nazwa = records[0].get('name');
records[0].set('column1', '');

firstGrid.store.add(records);
return true
}
}
});

var secondGridDropTargetEl = fileGrid.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
if(record_temp != undefined)
{
if(record_temp.get('docelowe') == '')
{
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);

var nazwa = records[0].get('name');
var baza = records[0].get('column1');
var zrodlowe = record_temp.get('zrodlowe');
var docelowe = baza;
record_temp.set('docelowe',nazwa);
record_temp.set('column1',baza);

aktualizuj_docelowe(uzytkownik, zrodlowe, docelowe, nazwa, idszablonu);

}
return true
}
}
});
*/
}
}

});

//tab czytanie pliku
var comboplik = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: panelstore,
valueField: 'id',
displayField: 'szablon'
});


pobierz_liste_szablonow();

var readerfile = new Ext.form.FormPanel({
title: 'Czytanie pliku',
width: 1195,
autoHeight: true,
frame: true,
items: [{
xtype: "fieldset",
items: [
comboplik, {

}
]

}]
});



var tabs = new Ext.TabPanel({
renderTo: 'panel',
activeTab: 1,
frame: true,
items: [{
title: 'Kreator szablonów',

items: [
panel_okna, displayPanel

]
},

{
title: 'Czytanie pliku',
items: [
readerfile
]
}

]

});

var panel = new Ext.Panel({
renderTo: 'okno_rejestr_glowny',
frame: false,
width: 1195,
stripeRows: true,
layoutConfig: {
columns: 1
},

items: [

tabs
]
});