当grid设置了可拖拽后, 多选的效果就被屏蔽了...咋整?

Question

官网有一个例子, 实现了两个表格之间的拖拽. 地址是这个:
[url]http://www.extjs.com/deploy/dev/examples/dd/dnd_grid_to_grid.html[/url]

这个例子中, 选择多行需要按下Shift或者是Ctrl.

但是客户不会这么聪明, 他们也许认为加上一个多选框会直观.

于是, 我给这个例子的代码做了小小的改动, 使之具有多选框.
但是调试之后, 发现, [color=red]只要设置了enableDragDrop为真, 多选框就只能当单选框用[/color]!
把enableDragDrop注释掉后就能多选了.

杯具挖...鱼和熊掌不能兼得?

下面是我的代码, 可直接运行..
[code="js"]
Ext.onReady(function(){

var myData = {
    records : [
        { name : "Rec 0", column1 : "0", column2 : "0" },
        { name : "Rec 1", column1 : "1", column2 : "1" },
        { name : "Rec 2", column1 : "2", column2 : "2" },
        { name : "Rec 3", column1 : "3", column2 : "3" },
        { name : "Rec 4", column1 : "4", column2 : "4" },
        { name : "Rec 5", column1 : "5", column2 : "5" },
        { name : "Rec 6", column1 : "6", column2 : "6" },
        { name : "Rec 7", column1 : "7", column2 : "7" },
        { name : "Rec 8", column1 : "8", column2 : "8" },
        { name : "Rec 9", column1 : "9", column2 : "9" }
    ]
};

var firstGridStore = new Ext.data.JsonStore({
    fields : [
        {name: 'name', mapping : 'name'},
        {name: 'column1', mapping : 'column1'},
        {name: 'column2', mapping : 'column2'}
    ],
    data   : myData,
    root   : 'records'
});

//  多选
var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false});

/**
 * 表格1
 */
var firstGrid = new Ext.grid.GridPanel({
    //  可多选
    sm               : sm,
    ddGroup          : 'secondGridDDGroup',
    store            : firstGridStore,
    columns          : [
        sm,
        { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
        {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
        {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
    ],
    enableDragDrop   : true,    //  可拖拽. 注释掉就能多选; 否则只能单选...
    primaryButtonOnly: true,
    stripeRows       : true,
    autoExpandColumn : 'name',
    title            : 'First Grid'
});

var secondGridStore = new Ext.data.JsonStore({
    fields : [
        {name: 'name', mapping : 'name'},
        {name: 'column1', mapping : 'column1'},
        {name: 'column2', mapping : 'column2'}
    ],
    root   : 'records'
});

var secondGrid = new Ext.grid.GridPanel({
    ddGroup          : 'firstGridDDGroup',
    store            : secondGridStore,
    columns          : [
        { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
        {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
        {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
    ],
    enableDragDrop   : true,
    stripeRows       : true,
    autoExpandColumn : 'name',
    title            : 'Second Grid'
});

var displayPanel = new Ext.Panel({
    width        : 650,
    height       : 300,
    layout       : 'hbox',
    renderTo     : document.body,
    defaults     : { flex : 1 }, //auto stretch
    layoutConfig : { align : 'stretch' },
    items        : [
        firstGrid,
        secondGrid
    ],
    bbar    : [
        '->', // Fill
        {
            text    : 'Reset both grids',
            handler : function() {
                //refresh source grid
                firstGridStore.loadData(myData);

                //purge destination grid
                secondGridStore.removeAll();
            }
        }
    ]
});

var firstGridDropTargetEl =  firstGrid.getView().scroller.dom;
new Ext.dd.DropTarget(firstGridDropTargetEl, {
        ddGroup    : 'firstGridDDGroup',
        notifyDrop : function(ddSource, e, data){
                var records =  ddSource.dragData.selections;
                Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
                firstGrid.store.add(records);
                firstGrid.store.sort('name', 'ASC');
                return true
        }
});

var secondGridDropTargetEl = secondGrid.getView().scroller.dom;
new Ext.dd.DropTarget(secondGridDropTargetEl, {
        ddGroup    : 'secondGridDDGroup',
        notifyDrop : function(ddSource, e, data){
                var records =  ddSource.dragData.selections;
                Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
                secondGrid.store.add(records);
                secondGrid.store.sort('name', 'ASC');
                return true
        }
});

});
[/code]

有人能解决这难题么...

[b]问题补充：[/b]

实在是杯具.
请问拖拽多选都是用ctrl shift实现的么

多选了就会覆盖checkbox的多选?

个人觉得这样设计并不好...

目前的最佳做法只能是放弃拖拽了.

客户确实是傻子..但是却不是傻B.
他们经常拍脑袋想出一些自以为很高明的观点:"这个表格数据要是能拖拽, 就显得很摩登了嘛~"
[b]问题补充：[/b]

.....

Answer 1

尽然客户可能有这么笨的，给你两种解决办法

1.在标题栏说明可以按shfit ctrl来多选
2.做成你现在复选框多选的样子，放弃拖曳功能，中间加一组按钮来控制两个grid数据的交换。

觉得你想得太周到了一点。个人比较推荐你告诉客户可以这么操作比较好。我想你加了复选框后，只要选择的时候是点击复选框那个组件来操作的话应该也可以多选的。

还有。我觉得，如果加了复选框的话就应该用第二种办法来做。并且他们看上去也配套一些。否则就用第一种啦。告诉那些没有那么聪明的客户。