Extjs 4 dataview拖放（複製）只能工作一次

我目前有兩個數據視圖，可以從第一個列表（a，b，c）拖拽一個項目到第二個（1,2,3 ）：Extjs 4 dataview拖放（複製）只能工作一次

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

誰能告訴我爲什麼從第一個列表中的每個項目第二次拖動失敗？

來源

2015-08-19 Black

問題應該在這裏，你想插入一個拖動項目來存儲，但插入一個商店不是一個模型數組。

正如Sencha ExtJs doc所說。你應該插入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/

來源

2015-08-19 01:09:19

Extjs 4 dataview拖放（複製）只能工作一次

回答

相關問題