Question

Hey there,

I would like to be able to drag an item (bookmark) from a grid to a tree (categories) but I don’t want the dropped bookmark-item to be added to the categories-tree as a new node and I don’t want it to be removed from the grid. I just want to catch the dropnode-event and update the category-id of the bookmark.

How can this be done? What I’ve got so far is the following:
http://jsfiddle.net/suamikim/A3T6W/

Ext.onReady(function() {
    // define model for tree
    Ext.define('Category', {
        extend: 'Ext.data.Model',

        fields: [
            { name: 'id',            type: 'int' },
            { name: 'parentCatId',    type: 'int' },
            { name: 'name',            type: 'string' }
        ]
    });

    // define model for grid
    Ext.define('Bookmark', {
        extend: 'Ext.data.Model',

        fields: [
            { name: 'id',        type: 'int' },
            { name: 'catId',    type: 'int' },
            { name: 'title',    type: 'string' },
            { name: 'url',        type: 'string' }
        ]
    });

    // Create the tree-panel
    var catTree = Ext.create('Ext.tree.Panel', {
        itemId: 'catTree',

        title: 'Categories',
        flex: 0.5,
        hideHeaders: true,
        rootVisible: false,
        allowDeselect: true,

        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop',
                dropGroup: 'bkmDDGroup',
                enableDrag: false,
                appendOnly: true
            }
        },

        store: Ext.create('Ext.data.TreeStore', {
            model: 'Category',
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'categories'
                }
            }
        }),

        root: [],

        columns: [{
            xtype: 'treecolumn',
            dataIndex: 'name',
            flex: 1
        }],

        listeners: {
            afterrender: function(tree) {
                var root = tree.getRootNode();

                // load static data
                root.appendChild([{
                        id: 0,
                        parentCatId: -1,
                        name: 'Cat1',
                        expanded: true,
                        categories: [{
                                id: 2,
                                parentCatId: 0,
                                name: 'Cat1.1',
                                categories: []
                            },{
                                id: 3,
                                parentCatId: 0,
                                name: 'Cat1.2',
                                categories: []
                        }]
                    },{
                        id: 1,
                        parentCatId: -1,
                        name: 'Cat2',
                        categories: []
                }]);

                // select the first item
                tree.getSelectionModel().select(root.getChildAt(0));
            },

            selectionChange: function(model, selected, opts) {
                bkmGrid.filterBookmarks((selected && selected[0]) ? selected[0].get('id') : -1);
            }
        }
    });

    // Create the grid-panel
    var bkmGrid = Ext.create('Ext.grid.Panel', {
        itemId: 'bkmGrid',

        title: 'Bookmarks',
        flex: 1,

        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop',
                dragGroup: 'bkmDDGroup'
            }
        },

        store: Ext.create('Ext.data.Store', {
            model: 'Bookmark',
            proxy: {
                type: 'memory'
            },
            data: [
                { id: 0, catId: 0, title: 'bkm1', url: 'http://www.url1.com' },
                { id: 1, catId: 0, title: 'bkm2', url: 'http://www.url2.com' },
                { id: 2, catId: 1, title: 'bkm3', url: 'http://www.url3.com' },
                { id: 3, catId: 1, title: 'bkm4', url: 'http://www.url4.com' },
                { id: 4, catId: 2, title: 'bkm5', url: 'http://www.url5.com' },
                { id: 5, catId: 3, title: 'bkm6', url: 'http://www.url6.com' }
            ]
        }),

        columns: [{
                text: 'Title',
                dataIndex: 'title',
                flex: 0.7
            },{
                text: 'URL',
                dataIndex: 'url',
                flex: 1,
                renderer: function(value, meta) {
                    meta.tdAttr = 'data-qtip="' + value + '"';
                    return '<a href="' + value + '">' + value + '</a>';
                }
        }],

        filterBookmarks: function(catId) {
            var store = this.getStore();

            store.clearFilter();
            if (catId >= 0) {
                store.filter('catId', catId);
            }
        }
    });

    // Create window which holds the dataview
    Ext.create('Ext.window.Window', {
        width: 500,
        height: 300,

        layout: {
            type: 'hbox',
            align: 'stretch'
        },

        items: [ catTree, bkmGrid ]
    }).show();
});

This throws the following exception after dropping a bookmark on the tree:
“Uncaught TypeError: Object [object Object] has no method ‘updateInfo'”

The exception is thrown in the appendChild-method which finally shouldn’t be called at all. Therefore the exception doesn’t matter but how can i prevent the tree from trying to add a new node after the drop?

Thanks

Answer 1

I just found a solution which looks like this:
http://jsfiddle.net/suamikim/A3T6W/4/

The “magic” is to just delete the records-array in the beforedrop-listener. Before deletion i saved the array to a custom config-object of my tree (this.droppedRecords) to be able to access the data again in the drop-listener:

    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            dropGroup: 'bkmDDGroup',
            enableDrag: false,
            appendOnly: true
        },
        listeners: {
            beforedrop: function(node, data, overModel, dropPos, opts) {
                this.droppedRecords = data.records;
                data.records = [];
            },
            drop: function(node, data, overModel, dropPos, opts) {
                var str = '';
                Ext.iterate(this.droppedRecords, function(record) {
                    str += record.get('title') + ' (id = ' + record.get('id') + ') dropped on ' + overModel.get('name') + '\n';
                });
                alert(str);

                this.droppedRecords = undefined;
            }
        }
    },

That’s it.

Thanks