我将以下示例代码修改为复选框模型。链接在这里 http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.DragDrop
两个问题,第一:
拖动项目时,所有选定的项目也会被移动。如何每次只拖动一项?
另一个问题:
拖动某个项目时,它会被强制选择。如何使其保持状态不变? (拖动前未选中则保持未选中状态,反之亦然)
我使用的是4.2.1版本。
以下是根据给定示例修改的代码:
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name'],
data: [
["Lisa"],
["Bart"],
["Homer"],
["Marge"]
],
proxy: {
type: 'memory',
reader: 'array'
}
});
Ext.create('Ext.grid.Panel', {
store: 'simpsonsStore',
selModel: {mode: 'SIMPLE'}, //added
selType: 'checkboxmodel', //added
columns: [{
header: 'Name',
dataIndex: 'name',
flex: true
}],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragText: 'Drag and drop to reorganize'
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
});
谢谢!
最佳答案
您需要覆盖DragDrop插件中的dragZone,因此它只发送这条记录。
拖动有一个 mousedown 事件,该事件正在选择网格中的行(因为这也有一个 mousedown 事件),因此它会在拖动结束之前触发。
为了理解这一点,我解释了这个事件(更多信息w3schools:
- 行选择事件:这是网格行上的mousedown事件。
- row
drag
事件:drag = mousepress +(可选)mousemove,但是:mousepress 并不真正存在,因此它决定为mousedown 和 mouseup 之间的时间帮助- 时间测量是通过delayedTasks完成的
- 如果 mouseup 在延迟时间之前触发,则不会执行,否则拖动开始
行
drop
事件:drop = Dragged + mouseup还有更多方法可以防止这种情况:
- 尝试将选择放入另一个事件,该事件在拖动开始后触发,但它可能会很困惑,因为该事件被多次使用...
- 它在鼠标按下时选择它,但我们在拖动开始事件时取消选择它,并且在放下时我们阻止选择,我在代码中执行此操作。
工作代码:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name'],
data: [["Lisa"], ["Bart"], ["Homer"], ["Marge"]],
proxy: {
type: 'memory',
reader: 'array'
}
});
Ext.create('Ext.grid.Panel', {
store: 'simpsonsStore',
selModel: {mode: 'SIMPLE'}, //added
selType: 'checkboxmodel', //added
columns: [
{header: 'Name', dataIndex: 'name', flex: true}
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragText: 'Drag and drop to reorganize',
onViewRender : function(view) {
var me = this,
scrollEl;
if (me.enableDrag) {
if (me.containerScroll) {
scrollEl = view.getEl();
}
me.dragZone = new Ext.view.DragZone({
view: view,
ddGroup: me.dragGroup || me.ddGroup,
dragText: me.dragText,
containerScroll: me.containerScroll,
scrollEl: scrollEl,
//to remember if the row was selected originally or not
onBeforeDrag: function(data, e) {
var me = this,
view = data.view,
selectionModel = view.getSelectionModel(),
record = view.getRecord(data.item);
if (!selectionModel.isSelected(record)) {
data.rowSelected = false;
}
return true;
},
onInitDrag: function(x, y) {
var me = this,
data = me.dragData,
view = data.view,
selectionModel = view.getSelectionModel(),
record = view.getRecord(data.item);
//for deselect the dragged record
if (selectionModel.isSelected(record) && data.rowSelected == false) {
selectionModel.deselect(record, true);
}
//added the original row so it will handle that in the drag drop
data.records = [record];
me.ddel.update(me.getDragText());
me.proxy.update(me.ddel.dom);
me.onStartDrag(x, y);
return true;
}
});
}
if (me.enableDrop) {
me.dropZone = new Ext.grid.ViewDropZone({
view: view,
ddGroup: me.dropGroup || me.ddGroup,
//changed the selection at the end of this method
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());
}
} else {
data.view.store.remove(data.records, data.view === view);
}
if (record && position) {
index = store.indexOf(record);
if (position !== 'before') {
index++;
}
store.insert(index, data.records);
}
else {
store.add(data.records);
}
if (view != data.view) {
view.getSelectionModel().select(data.records);
}
}
});
}
}
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
关于javascript - Extjs 使用复选框模型将单个项目拖放到网格上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18478266/