Remove feedback icon while dragging in ExtJS

Question

I have created a DataView in which items are internally draggable to rearrange, but the problem is that, while I can easily drag and re-arrange items within data view, while dragging, the overlay which is created of the item show "Red" feedback icon (which suggests that item cannot be dropped here), while I don't want any feedback icon to be shown (neither green or red), just an overlay of item is enough.

How to get rid of the feedback icon?

Answer 1

Short answer, you could just add these two CSS rules:

.x-dd-drag-ghost {
    padding-left: 5px;
}
.x-dd-drop-icon {
    display: none;
}

If you don't want to hide drag drop icon for the whole application, that's a bit more challenging... You have to add a custom css class to the Ext.dd.StatusProxy that will be created for your view. The StatusProxy is created in the constructor of Ext.dd.DragSource of which Ext.dd.DragZone is a subclass.

So, in the simplest case, if you're creating your drag zone yourself, you can add a class then:

var dragZone = Ext.create(...); // existing code
dragZone.proxy.addCls('no-icon');

Otherwise, you'll have to chase down the place where your drag zone/source is created...

Finally, here's the CSS for hiding only icons of proxies with the 'no-icon' class:

.x-dd-drag-proxy.no-icon .x-dd-drag-ghost {
    padding-left: 5px;
}
.x-dd-drag-proxy.no-icon .x-dd-drop-icon {
    display: none;
}