Extjs 4数据视图拖放(复制)只工作一次
Extjs 4 dataview drag-drop (to copy) works once only
我目前有两个数据视图,可以将一个项目从第一个列表(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>
谁能告诉我为什么第一个列表中的每个项目第二次拖动失败?
问题应该在这里,你想插入一个拖拽的项目来存储,但插入一个存储不是一个数组的模型。
正如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/
相关文章:
- Jquery FadeIn FadeOut 只工作一次
- jQuery滚动功能只工作一次
- iOS鼠标中心绑定只工作一次
- mongoose.js Model.remove在循环中只能工作一次
- Regex拆分-工作一次
- EventListener只能工作一次
- jQuery animate只在单击时工作一次
- data th JS每页只工作一次
- Jquery选择选项并获取只工作一次的更改值(页面加载时)
- CSS 类在验证时只工作一次
- Chrome扩展程序:浏览器操作单击按钮工作一次
- 单击仅工作一次
- MVC 分部视图中的 JQuery UI 自动完成功能只能工作一次
- Yelp API、OAuth和Angular与JSONP只工作一次
- 为什么这个脚本只工作一次?只替换元素一次,然后再也不替换
- evaluatteJavaScript()只工作一次
- orderBy筛选器只能工作一次
- Jquery事件只工作一次
- Javascript切换的内容函数只能工作一次
- 地图,rails 4.2,javascript,鼠标悬停,只工作一次(或两次).然后在重新加载之后