2

我将以下示例代码修改为复选框模型。这是链接 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()
    });
});

谢谢！

4

3 回答 3

3

  1. 你需要覆盖DragDrop插件中的dragZone，所以它只发送这条记录。

  2. 拖动有一个 mousedown 事件，它选择网格中的行（因为这也有一个 mousedown 事件），所以它在拖动结束之前被触发。

为了理解这一点，我解释了这个事件（更多信息w3schools：

  1. 行选择事件：这是网格行上的mousedown事件。
  2. 行drag事件：drag = mousepress + (optional) mousemove，但是：mousepress 并不真正存在，所以它在 mousedown 和 mouseup 之间的时间帮助下决定它
    • 时间测量是使用延迟任务完成的
    • 如果 mouseup 在延迟时间之前触发，则不会执行，否则开始拖动

  3. 行drop事件：drop = dragged + mouseup

    有更多的方法可以防止这种情况：

    1. 尝试将选择放在另一个事件中，该事件在拖动开始后被触发，但它可能会很混乱，因为这个事件被使用了很多次......
    2. 它在鼠标按下时选择它，但我们在拖动开始事件时取消选择它，并且在放置时我们阻止选择，我在代码中执行此操作。

工作代码：

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()
});
于 2013-08-28T12:51:27.840 回答
0

感谢亚历山大的回复。看了他的回复，我进入了Extjs的相关源码。最后解决了立即改变状态而不是保持不变的问题。编码：

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',
        /* Start: Code block added to the original example */
        selModel: {mode: 'SIMPLE', onRowMouseDown: Ext.emptyFn /* throw away onRowMouseDown handler to answer Q2 */},
        selType: 'checkboxmodel', 
        listeners: {
            afterrender: function(){
                /* override the original handleNodeDrop function to answer Q1 */
                this.view.plugins[0].dropZone.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);
                    }

                    // view.getSelectionModel().select(data.records);
                };
                /* override the original onInitDrag function to answer Q2 */
                this.view.plugins[0].dragZone.onInitDrag = function(x, y){
                    var me = this,
                    data = me.dragData,
                    view = data.view,
                    selectionModel = view.getSelectionModel(),
                    record = view.getRecord(data.item);

                    // if (!selectionModel.isSelected(record)) {
                        // selectionModel.select(record, true);
                    // }
                    // data.records = selectionModel.getSelection();
                    data.records = [selectionModel.lastFocused];

                    me.ddel.update(me.getDragText());
                    me.proxy.update(me.ddel.dom);
                    me.onStartDrag(x, y);
                    return true;
                };
            }
        }, 
        /* End: Code block added to the original example */
        columns: [{
            header: 'Name',
            dataIndex: 'name',
            flex: true
        }],
        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop',
                dragText: 'Drag and drop to reorganize'
            }
        },
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
});
于 2013-08-29T08:19:30.877 回答
0

如果有人对 4.1.1 解决方案感兴趣，这里的解决方案是修改后的 Alexander 代码，该代码在删除后保持先前选择的行被选中。

我稍微修改了 onInitDrag 以在拖动开始时选择已经选择的行，并使用 handleNodeDrop 使其在放置时被选中。

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}
    ],
    resizable: 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;
                            } else {
                                data.rowSelected = true;
                            }
                            return true;
                        },

                        onInitDrag: function(x, y) {
                            var me = this,
                                data = me.dragData,
                                view = data.view,
                                selectionModel = view.getSelectionModel(),
                                record = view.getRecord(data.item);
                            //to deselect the dragged record
                            if (selectionModel.isSelected(record) && data.rowSelected == false) {
                                selectionModel.deselect(record, true); 
                            } else {
                                selectionModel.select(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(),
                                selectionModel = view.getSelectionModel(),
                                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);
                            }
                            
                            //select row back on drop if it was selected
                            if (data.rowSelected) {
                                selectionModel.select(data.records, true);
                            }

                            if (view != data.view) {
                                view.getSelectionModel().select(data.records);
                            }          
                        }
                    });
                }
            }
        }        
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

PS：最简单的测试方法 - https://fiddle.sencha.com/#view/editor 只需选择 4.1.1 并复制粘贴。

于 2021-05-21T11:45:10.513 回答