0

我有两个并排的网格。左边的网格有一个用户可以选择的标签列表，右边的网格是空的，所以用户可以把他想要的标签拖到那里。

两个网格的插件代码是：

viewConfig: {
    plugins: [
        Ext.create('Ext.grid.plugin.DragDrop', {
            ddGroup: 'selectedTags'
        })
    ]
}

因此，由于我想限制用户只能拖动 5 个标签，因此我在右侧的网格中添加了以下代码：

listeners: {
    beforedrop: {
        fn: function() {
            if (grid.getStore().data.items.length > 4) {
                dropHandlers.cancelDrop();
            }
        },
        scope: me
    }
}

这工作得很好，但我想要的是在将项目拖到网格上时显示 NO-DROP 图标，而不是显示绿线，就好像允许该操作一样。

谢谢，

4

2 回答 2

1

在寻找这个解决方案一段时间后，我终于想通了。

您必须向目标网格中的 dropZone 添加两个方法： notifyOver和onNodeDrop

我的问题的解决方案是下面的代码：

Ext.create('Ext.grid.Panel', {
    store: myStore,
    columns: [columns],
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop to reorganize',
            pluginId : 'dragNdrop',
            dropZone:{
                notifyOver:function(source, e, data){
                    var store = this.view.ownerCt.getStore();

                    return store.getCount()<5?this.dropAllowed:this.dropNotAllowed
                },
                onNodeDrop:function(targetNode,dragZone,e,data){
                    var sourceStore = dragZone.view.ownerCt.getStore(),
                        targetStore = this.view.ownerCt.getStore(),
                        isDropValid = targetStore.getCount()<5;
                    if(isDropValid){
                        sourceStore.remove(data.records[0])
                        targetStore.add(data.records[0]);
                    }

                    return isDropValid;
                }
            }
        }
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
 });
于 2014-10-17T18:16:56.580 回答
0

Lopes，您可以在网格中使用列渲染器，您可以在其中检查项目计数并显示适当的图标。代码片段供您参考：

    gridCheckboxRenderer: function(value, meta, rec, rowInd, colInd, store){
      var cssPrefix = Ext.baseCSSPrefix, cls = [cssPrefix + 'grid-checkheader'];
      if (condition == false) {
         cls.push(cssPrefix + 'grid-checkheader-checked-disabled');
         return '<div class="' + cls.join(' ') + '">&#160;</div>';
        }
      return '<div class="x-grid-row-checker">&#160;</div>';
    }

希望能帮助到你。

于 2013-10-23T08:39:32.943 回答