0

嘿，

我希望能够将项目（书签）从网格拖动到树（类别），但我不希望将删除的书签项目作为新节点添加到类别树中，我不希望将其从网格中删除。我只想捕获 dropnode-event 并更新书签的 category-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();
});

将书签放在树上后会引发以下异常：
“未捕获的 TypeError：对象 [对象对象] 没有方法 'updateInfo'”

在 appendChild 方法中抛出异常，最终根本不应该调用它。因此异常无关紧要，但我如何防止树在删除后尝试添加新节点？

谢谢

4

1 回答 1

3

我刚刚找到了一个看起来像这样的解决方案：http: //jsfiddle.net/suamikim/A3T6W/4/

“魔术”只是删除 beforedrop-listener 中的记录数组。在删除之前，我将数组保存到我的树（this.droppedRecords）的自定义配置对象中，以便能够在下拉侦听器中再次访问数据：

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

就是这样。

谢谢

于 2012-09-14T06:20:22.437 回答