Drag and drop in Itemselector extJS

Question

How to disable items (see attachment) in Itemselector ? I want to disable some items in the source field on moving an item to the destination field. Can you please help me on this? ATTACHMENT - Image

I searched a lot and applied everything possible. I found no way possible.

As there is no option to disable by default (as far I know) I am removing the items in the list and adding again when needed. Here I have a doubt. User can drag from left and drop it on the right or he can drag from right and drop it onto the left. How to know from where he is dragging? Is there any method or functionality to determine the source location?

Answer 1

That unfortunately requires quite some manual work, because disabling records in grids, comboboxes etc. etc. is not supported out of the box by ExtJS.

I have described here how to create a combobox with disabled records. Since the combobox and the itemselector both rely on the boundlist under their hood, that comes in handy.

As you may find in the source code of ItemSelector , it has two properties, fromField and toField , which contain the two multiselect components. You can attach events to these lists or their respective boundlist .

A quick fiddle which shows how to gray out disabled elements and how to prevent the drag/drop of disabled elements: https://fiddle.sencha.com/#view/editor&fiddle/2382

What is missing is that the button does not check whether records are disabled before adding, you have to override the ItemSelector's onAddBtnClick method for that. This is far easier if you derive a new custom component from the ItemSelector, than it is in my Quick and Dirty fiddle. So I strongly recommend that you define your own custom component derived from ItemSelector.