问题描述
我有一个带有以下模板的 ExtJS DataView:
I have an ExtJS DataView with following template:
<ul>
<tpl for=".">
<li class="report-field" id="{listId}">
{[this.getReorderLinks(values, xindex, xcount)]}
<span class="field-title small" data-qtip="{displayName}">{displayName}</span>
<i class="field-remove" title="' + deleteLabel + '"></i>
</li>
</tpl>
</ul>
这使得每个项目列表看起来像这样:
Which makes each list of items look like this:
用户可以点击不同的图标并执行相关操作,按顺序向上/向下移动并删除.
Where user can click on different icons and perform related action, moving up/down in order and remove.
请注意,这些项目是使用拖放功能添加到数据视图中的,这里还有另一个源数据视图容器,我可以从中拖动项目并添加到此处.虽然这些向上/向下箭头可以很好地重新排序它们,但我想在内部使用拖放操作重新排序这些项目.
Note that these items are added to dataview using Drag and Drop, where there's another source dataview container from which I drag the items and add here. While these up/down arrows are working fine with reordering them, I want to reorder these items using drag-n-drop internally.
因此,为了使每个单独的项目可在同一区域中拖放,我使用了数据视图的 refresh
事件并在那里注册了 DND,如下所示:
So, to make each individual item draggable and droppable in the same region, I used refresh
event of dataview and registered DNDs there as follows:
listeners: {
'refresh': function(dataview, eOpts) {
var fieldsList = Ext.query('.added-field');
// Iterate over the list and make each item draggable/droppable.
Ext.each(fieldsList,function(field){
var dragSource,
fieldId;
fieldId = field.id;
dragSource = new Ext.dd.DragSource(field, {
isTarget : false
});
dropZone = new Ext.dd.DropTarget(field);
dragSource.dragData = {
record: me.viewStore.findRecord('listId', fieldId),
fieldId: fieldId
};
dropZone.notifyDrop = function(source, event, params) {
var targetRecord = me.viewStore.findRecord('listId', fieldId),
targetRecordIdx = me.viewStore.indexOf(targetRecord),
sourceRecordIdx = me.viewStore.indexOf(params.record);
//Perform rearrangement in the store.
me.viewStore.removeAt(sourceRecordIdx);
me.viewStore.insert(targetRecordIdx, params.record);
return true;
};
});
}
但它给了我奇怪的行为;当我尝试将Person Email"拖到Person City"之上时,DataView 被破坏,如下所示:
But it is giving me weird behaviours; when I try to drag "Person Email" on top of "Person City", DataView gets broken to look like following:
此外,当删除操作完成时,我收到 Uncaught TypeError: Cannot read property 'internalId' of undefined
.我什至试图通过某些毫秒延迟对 removeAt()
和 insert()
的调用,但仍然没有运气,此外,ExtJS 没有文档或可用于拖放以重新排序 DataView 项目的工作示例.
Also, I get Uncaught TypeError: Cannot read property 'internalId' of undefined
when drop operation completes. I even tried to defer calls to removeAt()
and insert()
by certain ms, but still no luck, moreover, ExtJS has no documentation or working example available for Drag n Drop to Reorder DataView items.
任何帮助将不胜感激,谢谢.
Any help would be appreciated, thanks.
推荐答案
这让我想起了糟糕的经历在 ExtJS 4 中拖放.无论如何,你可以试试这个 插件.否则,这是我尝试过的(滚动尚未处理)(jsFiddle):
This reminds me a bad experience I had with drag drop in ExtJS 4. Anyway, you may try this plugin. Otherwise, here is something I have tried (scroll is not handled yet) (jsFiddle) :
new Ext.view.DragZone({
view: view,
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()));
}
} else {
data.view.store.remove(data.records, data.view === view);
}
index = store.indexOf(record);
if (position !== 'before') {
index++;
}
store.insert(index, data.records);
view.getSelectionModel().select(data.records);
}
});
这篇关于使用拖放重新排列 DataView 的项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!