Problems dragging from DataView to GridPanel...

January 5th, 2009
  • I'm trying to enable dragging from a DataView to a GridPanel. I want to simulate dropping on the rows of the grid rather than the entire panel so I'm using a DropZone instead of a DropTarget. My problem is that I see that the notifyDrop event is fired, but I never see the onNodeDrop event so I can't determine which row was dropped on. Also I don't see the green checkmark when I drag over the rows, it always shows the red X. Here is a simplified version of the code I'm using:

    Ext.namespace("Ext.cl", "Ext.cl.dd");

    Ext.cl.dd.DragZone = function(view, config){
    this.view = view;
    Ext.cl.dd.DragZone.superclass.constructor.call(thi s, view.getEl(), config);
    };

    Ext.extend(Ext.cl.dd.DragZone, Ext.dd.DragZone, {
    getDragData : function(e){
    return {
    ddel: e.getTarget()
    };
    }
    });

    Ext.onReady(function() {
    var gStore = new Ext.data.JsonStore({
    fields : [ 'n' ],
    data : [
    { n : 'Name 1' }, { n : 'Name 2' }, { n : 'Name 3' }, { n : 'Name 4'}, { n : 'Name 5' },
    { n : 'Name 6' }, { n : 'Name 7' }, { n : 'Name 8' }, { n : 'Name 9'}, { n : 'Name 10' }
    ]
    });

    var g = new Ext.grid.GridPanel({
    title : 'Grid',
    region : 'west',
    width : 300,
    store : gStore,

    colModel: new Ext.grid.ColumnModel([{
    id : 'name',
    header: 'Name',
    dataIndex: 'n'
    }
    ])
    });

    var dv = new Ext.DataView({
    store : new Ext.data.JsonStore({
    fields : [ 'd' ],
    data : [
    { d : 'Drag Me 1 to grid' }, { d : 'Drag Me 2 to grid' }, { d : 'Drag Me 3 to grid' }
    ]
    }),
    tpl : new Ext.XTemplate(
    '',
    '
    {d}
    ',
    '    '
    ),
    itemSelector : 'h5',
    plugins: new Ext.DataView.DragSelector({dragSafe:true})

    });

    var dp = new Ext.Panel({
    title : 'Data View',
    region : 'center',
    layout : 'fit',
    items : dv
    });

    var main = new Ext.Panel({
    title : 'Drag and Drop',
    layout : 'border',
    items : [ g, dp ],
    height : 800,
    width : 1000,
    renderTo : 'workspace-content'
    });

    main.render();

    var dragZone = new Ext.cl.dd.DragZone(dv, {
    containerScroll:true,
    ddGroup: 'myDD'}
    );


    var dropZone = new Ext.dd.DropZone(g.getEl(), {
    ddGroup: 'myDD',
    onNodeDrop : function(n, dd, e, data){
    console.log('onNodeDrop');
    return true;
    },
    notifyDrop : function(dd, e, data) {
    console.log('notifyDrop');
    return true;
    }
    });

    });

    I see in the examples that I need to register the elements that will be DropZone nodes with the Ext.dd.Registry so I added a viewConfig with listeners to register the rows but it didn't seem to help:

    viewConfig : {
    listeners : {
    refresh : function (v) {
    var i = 0;
    var r = v.getRow(i++);
    while (r) {
    Ext.dd.Registry.register(r);
    r = v.getRow(i++);
    }
    },
    rowremoved : function (v, n, r) {
    Ext.dd.Registry.unregister(v.getRow(n));
    },
    rowsinserted : function (v, fn, ln) {
    for (var i = fn; i <= ln; i++) {
    Ext.dd.Registry.register(v.getRow(i));
    }
    }
    }
    },


    Hopefully it's something easy that I'm missing. Thanks in advance for any help.

    c. loki


  • How I create a D&D GridPanel (two grids) using EXTJS 2.0? It does not have examples?

    grid 1 -> D&D -> grid 2


  • I've been scouring the forums for help performing Grid1->Drag->Grid2 and while there was plenty of good information to be found, this self-contained example helped me tremendously.

    Thank you.


  • I figured it out. I hadn't overridden the getTargetFromEvent method of the DragZone. The default implementation looks for the element in the dd.Registry. I changed it to look for my elements and it works great.

    thanks,
    c. loki


  • Solution, but no Drag in same grid !!! :-/

    /*
    * Ext JS Library 2.0
    * (c) 2006-2007, Ext JS, LLC.
    * licensing@extjs.com
    *
    * http://extjs.com/license
    */

    Ext.onReady(function(){

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    Ext.QuickTips.init();

    var myData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
    ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
    ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
    ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
    ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
    ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
    ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
    ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
    ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
    ['McDonald's Corporation',36.76,0.86,2.40,'9/1 12:00am'],
    ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
    ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
    ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
    ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
    ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
    ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
    ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    // example of custom renderer function
    function change(val){
    if(val > 0){
    return '' + val + '';
    }else if(val < 0){
    return '' + val + '';
    }
    return val;
    }

    // example of custom renderer function
    function pctChange(val){
    if(val > 0){
    return '' + val + '%';
    }else if(val < 0){
    return '' + val + '%';
    }
    return val;
    }

    // create the data store
    var dsRelac1 = new Ext.data.SimpleStore({
    fields: [
    {name: 'company'},
    {name: 'price', type: 'float'},
    {name: 'change', type: 'float'},
    {name: 'pctChange', type: 'float'},
    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]
    });
    dsRelac1.loadData(myData);

    // Modo de seleção (checkboxes)
    var sm1 = new Ext.grid.CheckboxSelectionModel();
    // create the Grid
    var gridRelac1 = new Ext.grid.GridPanel({
    el: 'grid-example',
    store: dsRelac1,
    sm: sm1,
    columns: [
    sm1,
    {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
    {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
    {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
    {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
    {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ],
    stripeRows: true,
    autoExpandColumn: 'company',
    height:350,
    width:600,
    // enable drag and Drop
    enableDragDrop: true,
    dropConfig: {
    appendOnly:true
    },
    ddGroup: "GridDD",
    title:'Array Grid'
    });

    //gridRelac1.render();

    //gridRelac1.getSelectionModel().selectFirstRow();

    // -------------------------------------------------------------------

    var myData2 = ;

    // example of custom renderer function
    function change(val){
    if(val > 0){
    return '' + val + '';
    }else if(val < 0){
    return '' + val + '';
    }
    return val;
    }

    // example of custom renderer function
    function pctChange(val){
    if(val > 0){
    return '' + val + '%';
    }else if(val < 0){
    return '' + val + '%';
    }
    return val;
    }

    // create the data store
    var dsRelac2 = new Ext.data.SimpleStore({
    fields: [
    {name: 'company'},
    {name: 'price', type: 'float'},
    {name: 'change', type: 'float'},
    {name: 'pctChange', type: 'float'},
    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]
    });
    dsRelac2.loadData(myData2);

    // Modo de seleção (checkboxes)
    var sm2 = new Ext.grid.CheckboxSelectionModel();
    // create the Grid
    var gridRelac2 = new Ext.grid.GridPanel({
    el: 'grid-target',
    store: dsRelac2,
    sm: sm2,
    columns: [
    sm2,
    {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
    {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
    {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
    {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
    {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ],
    stripeRows: true,
    autoExpandColumn: 'company',
    height:350,
    width:600,
    ddGroup: "GridDD",
    title:'Target Grid'
    });

    //gridRelac2.render();

    //gridRelac2.getSelectionModel().selectFirstRow();




    // tabs for the center
    var tabs = new Ext.TabPanel({
    region: 'center',
    margins:'3 3 3 0',
    activeTab: 0,
    defaults:{autoScroll:true},

    items:[{
    title: 'Bogus Tab',
    layout: 'form',
    items: [gridRelac1,gridRelac2]
    }]
    });

    // Panel for the west
    var nav = new Ext.Panel({
    title: 'Navigation',
    region: 'west',
    split: true,
    width: 200,
    collapsible: true,
    margins:'3 0 3 3',
    cmargins:'3 3 3 3'
    });

    var win = new Ext.Window({
    title: 'Layout Window',
    closable:true,
    width:600,
    height:350,
    //border:false,
    plain:true,
    layout: 'border',

    items: [nav, tabs]
    });

    win.show();

    // ----------------------------------------------------------

    // Grid 1 -> Grid 2
    //this is a grid DragDrop
    var ddrow = new Ext.dd.DropTarget(gridRelac2.getEl(), {
    ddGroup: "GridDD",
    copy:false,
    notifyDrop : function(dd, e, data){
    var sm = gridRelac1.getSelectionModel();
    var rows = sm.getSelections();
    var cindex = dd.getDragData(e).rowIndex;
    for(i = 0; i < rows.length; i++) {
    rowData = dsRelac1.getById(rows[i].id);
    if(!this.copy)
    dsRelac1.remove(dsRelac1.getById(rows[i].id));
    dsRelac2.insert(cindex,rowData);
    };
    gridRelac2.getView().refresh();
    dsRelac2.sort('company', 'asc');
    }
    });

    var ddGrid = new Ext.grid.GridDragZone(gridRelac1, {
    containerScroll: true,
    ddGroup: "GridDD"
    });

    // ----------------------------------------------------------

    // Grid 2 -> Grid 1
    //this is a grid DragDrop
    var ddrowTarget = new Ext.dd.DropTarget(gridRelac1.getEl(), {
    ddGroup: "GridDD",
    copy:false,
    notifyDrop : function(dd, e, data){
    var sm = gridRelac2.getSelectionModel();
    var rows = sm.getSelections();
    var cindex = dd.getDragData(e).rowIndex;
    for(i = 0; i < rows.length; i++) {
    rowData = dsRelac2.getById(rows[i].id);
    if(!this.copy)
    dsRelac2.remove(dsRelac2.getById(rows[i].id));
    dsRelac1.insert(cindex,rowData);
    };
    gridRelac1.getView().refresh();
    dsRelac1.sort('company', 'asc');
    }
    });

    var ddGridTarget = new Ext.grid.GridDragZone(gridRelac2, {
    containerScroll: true,
    ddGroup: "GridDD"
    });
    });







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about Problems dragging from DataView to GridPanel... , Please add it free.

    Posted in xn--g7qx97f.com | edit

    Constipation: the Fast, Easy Answer to Something No One Talks About
    10 Tips To Prevent You From Being A Victim Of Credit Card Fraud