[英]Rearrange items of DataView with Drag and Drop
我有一个带有以下模板的ExtJS DataView:
<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>
这使得每个项目列表如下所示:
用户可以在其中单击不同的图标并执行相关操作,依次向上/向下移动并删除。
请注意,这些项目是通过拖放操作添加到dataview的,这里还有另一个源dataview容器,我可以从中拖动这些项目并添加到此处。 虽然这些向上/向下箭头可以很好地对它们进行重新排序,但我想在内部使用拖放功能对这些项目进行重新排序。
因此,为了使每个项目都可以在同一区域中拖放,我使用dataview的refresh
事件和在此处注册的DND如下:
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;
};
});
}
但这给了我怪异的行为。 当我尝试将“个人电子邮件”拖到“个人城市”顶部时,DataView损坏,看起来如下:
另外,我收到Uncaught TypeError: Cannot read property 'internalId' of undefined
放置操作完成后, Uncaught TypeError: Cannot read property 'internalId' of undefined
。 我什至试图removeAt()
和insert()
的调用推迟一定的时间,但是仍然没有运气,而且,ExtJS没有可用的文档或工作示例,可用于拖放n重新排序DataView项目。
任何帮助,将不胜感激,谢谢。
这让我想起了在ExtJS 4中拖放时的不良体验。无论如何,您可以尝试使用此插件 。 否则,这是我尝试过的东西(尚未处理滚动)( 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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.