ExtJS 4 / 5 - Set the correct CSS for a Drag and Drop that is not allowed with custom rules

Question

I have two grids side by side. The left grid has a list of tags the user can select, and the grid on the right is empty so the user can drag the tags he wants there.

The plugin code for both grids is:

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

So, as I wanted to limit the user to be able to drag only 5 tags, I've added the following code to the grid on the right:

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

This is working perfectly but what I wanted is to show the NO-DROP icon when the items are dragged over the grid instead of showing the green line as if the action was allowed.

Thanks,

Answer 1

After looking for this solution for a while, I finally figured it out.

You must add two methods to the dropZone in the Target Grid: notifyOver and onNodeDrop

The solution for my problem would be the code below:

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()
 });

Answer 2

Lopes, you can use column renderer in grid where you can check the items count and display appropriate icon. Code snippet for your reference:

    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>';
    }

Hope it helps.