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 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
        ]
    });