Drag and Drop - Limit the number of items in a panel

Im trying to limit the number of items that can be dragged to a panel, but its not working the way it should

I have the following code:

Code:

Ext.create('Ext.grid.Panel', {            store: 'simpsonsStore2',
    columns: [{header: 'Name',  dataIndex: 'name', flex: true}],
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
                                dragText: 'Drag and drop to reorganize',
            pluginId : 'dragNdrop'
        }
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    listeners : {
        viewready: function(cmp) {
            var view = cmp.getView(),
            store = view.getStore(),
            dropZone = view.findPlugin('gridviewdragdrop').dropZone;
                    
            dropZone.onNodeOver = function(n, dd, e, data){
                return store.getCount() < 5 ? dropZone.dropAllowed : dropZone.dropNotAllowed;
            }
        }
    }
        });

The problem is that this function displayed the correct CSS (dropAllowed or dropNotAllowed) based on my condition (store count is less than 5) but the items cannot be dragged from one panel to another anymore.

And if I use a plugin listener like :

Code:

beforedrop: function(node,  data,  overModel,  dropPosition,  dropHandlers) {
    if (grid.getStore().getCount() > 4) {
        dropHandlers.cancelDrop();
    }
}

It works and prevents the item from being added but it does not display the dropNotAllowed CSS.

I have created a fiddle with some test data, any help is appreciated.

http://ift.tt/1F89Qoa

Thanks,

Drag and Drop - Limit the number of items in a panel