GridPanel Drag and Drop (el.dom based issue)

[newextuser2011]

Hi,

I am having trouble trying to do drag and drop (moving data from one GridPanel to another)

I will pass full code if requested. However, It all works (JSON returning correctly and all that) -- The issue is when I want to include a drag/drop feature to a GridPanel. Here is an example provided from a Web page, which I used as a starter guide:-

var moviesGridDropTargetEl =
moviesGrid.getView().el.dom.childNodes[0].childNodes[1];
var moviesGridDropTarget = new
Ext.dd.DropTarget(moviesGridDropTargetEl, {
ddGroup: 'availableMoviesDDGroup',
copy: true,
notifyDrop: function(ddSource, e, data) {
function addRow(record, index, allItems) {
var foundItem = moviesStore.find('title',
record.data.name);
if (foundItem == -1) {
moviesStore.add(record);
moviesStore.sort('title', 'ASC');
ddSource.grid.store.remove(record);
}
}
Ext.each(ddSource.dragData.selections, addRow);
return (true);
}
}); 

moviesGrid.getView().el is null. Why? What could I be doing wrong?

I have also tried other variations to this, such as .getView().mainBody and a few others and they not returning any relevant data.


I will attach an example codeset. It is very simple stuff. It's just that particular line of code. What I am doing wrong?

[newextuser2011]

Basics of GridPanel

    var fields = [
        {name:'Id', mapping:'Id'},
        {name:'Code', mapping:'Code'},
        {name:'Name', mapping:'Name'}
    ];

    var cols = [
        { id : 'Id', header: "Identity", width: 160, sortable: true, dataIndex: 'Id'},
        {header: "Code", width: 50, sortable: true, dataIndex: 'Code'}
    ];

    var vp = new Ext.Viewport({
         ... shortended code

                xtype:"panel",
                title:"Selection",
                id:"selectionTab",
                disabled:true,
                items:[
                    new Ext.grid.GridPanel({
                        id:"grdSelectionLeft",
                        ddGroup          : 'leftGridDDGroup',
                        store:{},
                        columns          : cols,
                        enableDragDrop   : true,
                        stripeRows       : true,
                        title            : 'Services Available',
                        height:400,
                        width:400
                    }),

                    new Ext.grid.GridPanel({
                        id:"grdSelectionRight",
                        ddGroup          : 'rightGridDDGroup',
                        store            : {},
                        columns          : cols,
                        enableDragDrop   : true,
                        stripeRows       : true,
                        title            : 'Services Selected',
                        height:400,
                        width:400
                    })
                ]
    }); // End of Viewport

    /* NOTE ISSUE IS HERE */
    /*
        Also tried creating a GridPanel within a variable
        (ie var grdPanel1 = new Ext.grid...) so I have also
        done:-
            var ddrow = new Ext.dd.DropTarget(grdPanel1.getView().mainBody...
        Same applies to trying getView().el.dom, all of which return null/error
        More will be described after this code
    */
    var ddrow = new Ext.dd.DropTarget(Ext.getCmp("grdSelectionLeft").getView().mainBody, {
    ddGroup : 'mygrid-dd',
    notifyDrop : function(dd, e, data){
        var sm = grid.getSelectionModel();
        var rows = sm.getSelections();
        var cindex = dd.getDragData(e).rowIndex;
        if (sm.hasSelection()) {
            for (i = 0; i < rows.length; i++) {
                store.remove(store.getById(rows[i].id));
                store.insert(cindex,rows[i]);
            }
            sm.selectRecords(rows);
        }  
    } 

Firstly, Yes, the code inside Ext.dd.DropTarget does not match the code I done above. This is not whats causing the error. The code was copied and pasted from another site. Basically, I added a break point to the area causing the problem and went through the available properties in Ext.getCmp("grdSelectionLeft") and Ext.getCmp("grdSelectionLeft").getView() and cannot for the life of me find the correct dataset required.

So, I have tried getCmp, getDom, and (I think) getBody. Also, as mentioned in the comment, I also created the GridPanel into a variable. This follows the examples from other sites and from a book. However, the result is the same.

just to demonstrate: -

var grdPanel = new Ext.grid.GridPanel({...})

I add it to my viewport (replacing the code above with it's var equiverlant)
in the last portion, I use: -
Ext.dd.DropTarget(grdPanel .getView().mainBody

Result is the same.

Could using the specific 'renderTo' property be the reason for all of this?
I shall have to try this method and get back to you.

Any questions, or suggestions, and I will reply as soon as I can.

Many thanks.