Results 1 to 3 of 3

Thread: Dnd Grid Panel inside TabPanel

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Default Dnd Grid Panel inside TabPanel

    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?

    Code:
       // 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!

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    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/

  3. #3

    Default

    Here's my code:
    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 szablonw',
    
                    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
            ]
        });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •