1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    26
    Answers
    2
    Vote Rating
    1
    getbogged is on a distinguished road

      0  

    Default Answered: Firefox, IE, Safari drag and drop compatibility.

    Answered: Firefox, IE, Safari drag and drop compatibility.


    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

    Code:
     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
    Code:
     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.
    Last edited by getbogged; 9 Apr 2012 at 11:02 AM. Reason: awful formatting

  2. 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.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,079
    Answers
    674
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    26
    Answers
    2
    Vote Rating
    1
    getbogged is on a distinguished road

      0  

    Default


    It breaks on

    ext-all-debug.js
    Code:
            
            
            
    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
    [IMG]chrome://firebug/content/blank.gif[/IMG] clearInterval(id);ext-all-debug.js (line 10470)



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

  5. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    26
    Answers
    2
    Vote Rating
    1
    getbogged is on a distinguished road

      0  

    Default


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

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    26
    Answers
    2
    Vote Rating
    1
    getbogged is on a distinguished road

      0  

    Default


    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.
    Last edited by getbogged; 11 Apr 2012 at 9:47 AM. Reason: didnt want to bump