Extjs 4 DataView拖放（复制）仅工作一次

Question

I currently have two data views, and it's possible to drag an item from the first list (a,b,c) into the second (1,2,3): 我目前有两个数据视图，可以将一个项目从第一个列表（a，b，c）拖到第二个（1,2,3）中：

As designed, the item from the first list stays in the list (ie. drag-drop is a copy, not a move). 按照设计，第一个列表中的项目保留在列表中（即，拖放操作是副本，而不是移动）。 The problem I have is, it's only possible to move each item from the first list once. 我的问题是，每个项目只能从第一个列表中移动一次。 I want to be able to drag any number of 'a' records into the second list. 我希望能够将任意数量的“ a”记录拖到第二个列表中。

<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/ext-all-debug.js"></script>

<style type="text/css">
.data-view-wrap {
    padding: 5px;
}

.data-view-wrap div {
    line-height: 50px;
    text-align: center;
    overflow: hidden;
    background: pink;
    width: 200px;
}
</style>


<script type="text/javascript">
    var store;
    Ext.onReady(function() {

        var view;

        store = Ext.create('Ext.data.Store', {
            fields : [ 'name' ],
            data : [ { name : 1 }, { name : 2 }, { name : 3 } ]
        });

        store2 = Ext.create('Ext.data.Store', {
            fields : [ 'name' ],
            data : [ { name : 'a' }, { name : 'b' }, { name : 'c' } ]
        });

        view = Ext.create('Ext.view.View', {
            store : store,
            itemSelector : '.data-view-wrap',
            tpl : [ '<tpl for=".">', '<div class="data-view-wrap">', '<div><span>#{name}</span></div>', '</div>', '</tpl>', '<div class="x-clear"></div>' ]
        })

        view2 = Ext.create('Ext.view.View', {
            store : store2,
            itemSelector : '.data-view-wrap',
            tpl : [ '<tpl for=".">', '<div class="data-view-wrap">', '<div><span>#{name}</span></div>', '</div>', '</tpl>', '<div class="x-clear"></div>' ]
        })

        Ext.create('Ext.Panel', {
            width : 800,
            height : 300,
            autoScroll : true,
            renderTo : Ext.getBody(),
            bodyPadding : 5,
            layout : 'hbox',

            items : [ view2, view ]
        });

        new Ext.view.DragZone({
            view : view,
            ddGroup : 'test',
            dragText : 'test'
        });

        new Ext.view.DragZone({
            view : view2,
            ddGroup : 'test',
            dragText : 'test'
        });

        new Ext.view.DropZone({
            view : view,
            ddGroup : 'test',
            handleNodeDrop : function(data, record, position) { 
                var view = this.view, store = view.getStore(), index, records, i, len;
                if (data.copy) {
                    records = data.records;
                    data.records = [];
                    for (i = 0, len = records.length; i < len; i++) {
                        data.records.push(records[i].copy(records[i].getId()));
                    }
                }  
                index = store.indexOf(record);
                if (position !== 'before') {
                    index++;
                }
                store.insert(index, data.records);
                view.getSelectionModel().select(data.records);
            }
        });
    });
</script>


</head>
<body>
    <div id='content_div'></div>
</body>
</html>

Can anyone tell me why a second drag of each item from the first list fails? 谁能告诉我为什么第二个项目从第一个列表中拖动失败？

Answer 1

The problem should be here, you want to insert a dragged item to store, but insert a store not an array of model. 问题应该在这里，您想插入要存储的拖动项，但要插入存储而不是模型数组。

As Sencha ExtJs doc said. 正如Sencha ExtJs博士所说。 You should insert An Array of Ext.data.Model objects to add to the store. 您应该插入An Array of Ext.data.Model objects to add to the store.

https://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store-method-insert https://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store-method-insert

new Ext.view.DropZone({
    view : view,
    ddGroup : 'test',
    handleNodeDrop : function(data, record, position) { 
        var view = this.view, store = view.getStore(), index, records, i, len;
        if (data.copy) {
            records = data.records;
            data.records = [];
            for (i = 0, len = records.length; i < len; i++) {
                data.records.push(records[i].copy(records[i].getId()));
            }
        }  
        index = store.indexOf(record);
        if (position !== 'before') {
            index++;
        }

        //data.records is a ExtJS.store not An Array 
        //so just get the first data and insert it should do
        //store.insert(index, data.records);
        store.insert(index, data.records[0].data);
        view.getSelectionModel().select(data.records);
    }
});

JSFiddle Here http://jsfiddle.net/jul101/q5nssd6e/ JSFiddle这里http://jsfiddle.net/jul101/q5nssd6e/

Extjs 4 DataView拖放（复制）仅工作一次

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-08-19 01:09:19

Extjs 4 DataView拖放（复制）仅工作一次

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-08-19 01:09:19

解决方案1
2 已采纳 2015-08-19 01:09:19