在不添加树节点的情况下从网格拖放到树

Drag and drop from grid to tree without adding a tree node

本文关键字:网格 拖放 情况下 添加 树节点      更新时间:2023-09-26

嘿,

我希望能够将项目(书签)从网格拖动到树(类别),但我不希望将删除的书签项目作为新节点添加到类别树中,也不希望将其从网格中删除。我只想捕捉dropnode事件并更新书签的类别id。

如何做到这一点?到目前为止,我得到了以下内容:
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();
});

在树上放置书签后,会引发以下异常:
"未捕获的类型错误:对象[Object Object]没有方法'updateInfo'"

异常是在appendChild方法中抛出的,该方法最终根本不应该被调用。因此,异常并不重要,但我如何防止树在删除后尝试添加新节点?

感谢

我刚刚找到了一个解决方案,如下所示:http://jsfiddle.net/suamikim/A3T6W/4/

"魔术"就是删除beforedrop侦听器中的记录数组。在删除之前,我将数组保存到树的自定义配置对象(this.droppedRecords)中,以便能够在drop监听器中再次访问数据:

    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;
            }
        }
    },

就是这样。

感谢