0

ちょっと、そこ、

項目 (ブックマーク) をグリッドからツリー (カテゴリ) にドラッグできるようにしたいのですが、ドロップしたブックマーク項目を新しいノードとしてカテゴリ ツリーに追加したくありません。グリッドから削除します。dropnode-event をキャッチして、ブックマークのカテゴリ 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();
});

これにより、ツリーにブックマークをドロップした後、次の例外がスローされます:
"Uncaught TypeError: Object [object Object] has no method 'updateInfo'"

例外は、最終的にはまったく呼び出されない appendChild メソッドでスローされます。したがって、例外は問題ではありませんが、ドロップ後にツリーが新しいノードを追加しようとするのを防ぐにはどうすればよいですか?

ありがとう

4

1 に答える 1

3

次のようなソリューションを見つけました： http://jsfiddle.net/suamikim/A3T6W/4/

「魔法」は、beforedrop-listener の records-array を削除することです。削除する前に、配列をツリーのカスタム構成オブジェクト (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 に答える