Drag & Drop, ListView and setAllowSelfAsSource

[Algiano]

Hi All,

I'm having a bit of a problem using a ListView and Drag & Drop to itself to work properly.

The ListView uses a store declared as:



store = new ListStore<BaseModel>(loader);


Note that the ListStore is being populated from an HttpProxy loading XML as it's data. This loads correctly as the XTemplate I'm using to display the data shows the correct data.

The ListView is created as follows:



//Initialise the ListView
listView = new ListView() {
@Override
public void onComponentEvent(ComponentEvent se) {
//Do stuff
super.onComponentEvent(se);
}
};

//Set the list view properties and config
listView.setStyleAttribute("overflow-Y", "auto");
listView.setStyleAttribute("padding", "0px");
listView.setStyleAttribute("border", "0px");
listView.setBorders(false);
listView.setLoadingText("Loading...");
listView.setStyleAttribute("backgroundColor", "white");
listView.setTemplate(template);
listView.setStore(store);

listView.setOverStyle("");
listView.setSelectStyle("");
listView.setItemSelector("div.my-container");
//listView.getSelectionModel().bindList(listView);
listView.getSelectionModel().setSelectionMode( SelectionMode.SINGLE );


The XTemplate contains the DIV with class name equal to my-container. This actually gets selected when using DND, it just doesn't allow you to place the selected item anywhere.

This is the DND code:



new ListViewDragSource(listView);
ListViewDropTarget listViewTarget = new ListViewDropTarget(listView);
listViewTarget.setAllowSelfAsSource(true);
listViewTarget.setFeedback(Feedback.INSERT);
//listViewTarget.setOperation(Operation.MOVE);


Any ideas why the ListView is letting me pick up the object but then gives me the little red symbol and doesn't allow me to drop the row anywhere?

Thanks,
Ale

[Algiano]

Hi All,

Just an udpate on my research so far. It seems that the ListViewDropTarget goes straight from:



protected void onDragEnter(DNDEvent e)


to:



protected void onDragLeave(DNDEvent e)


Which means a Events.DragLeave has been raised. The only place where this can be raised is i nthe DNDManager, here:



void handleDragMove(DragSource source, DNDEvent event) {
DropTarget target = getTarget(event.getTarget());

// no target with current
if (target == null) {
if (currentTarget != null) {
currentTarget.handleDragLeave(event);
currentTarget.fireEvent(Events.DragLeave, event);
currentTarget = null;
}
return;
}

....
}


This makes me think that the line "DropTarget target = getTarget(event.getTarget());" is actually returning null, i.e. the method getTarget is failing to find the event.getTarget():



private DropTarget getTarget(Element elem) {
for (int i = 0, len = targets.size(); i < len; i++) {
DropTarget target = targets.get(i);
if (DOM.isOrHasChild(target.component.getElement(), elem)) {
return target;
}
}
return null;
}



Now, if I override the onDragEnter(DNDEvent e) method and take the getTarget() method but replace the loop with only:



Element elem = event.getTarget();
if (DOM.isOrHasChild(listView.getElement(), elem))
Log.debug("true");


The element is now found! It seems like when the listView is added to the ListViewDropTarget which in turns adds it to the DNDManager, the ListView is empty. So when the getTarget method is called, the ListView copy of the DNDManager (which was added before the Store content was retrieved) does not contain the e.getTarget(). Either this, or it's not properly added?

Help! :)

Thanks,
Ale

[Algiano]

Anyone?

Since the problem I've tried debugging the ListView DND and I;ve seen that it detects a x-drag-overlay as a target which is causing the problems...

I;ve also tried using simple DND and get the same issue - it keeps telling me I can;t drop onto the target....

Please note that i'm trying to do this in a Window.

[Algiano]

This is actually a bug, please see

http://www.extjs.com/forum/showthread.php?p=313082#post313082

For more info.