Extjs 4 DataView拖放（復制）僅工作一次

Question

我目前有兩個數據視圖，可以將一個項目從第一個列表（a，b，c）拖到第二個（1,2,3）中：

按照設計，第一個列表中的項目保留在列表中（即，拖放操作是副本，而不是移動）。 我的問題是，每個項目只能從第一個列表中移動一次。 我希望能夠將任意數量的“ 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>

誰能告訴我為什么第二個項目從第一個列表中拖動失敗？

Answer 1

問題應該在這里，您想插入要存儲的拖動項，但要插入存儲而不是模型數組。

正如Sencha ExtJs博士所說。 您應該插入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

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這里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