PDA

View Full Version : [FIXED] Drag & Drop Cursor Issue in Browser Mode



stan229
12 May 2009, 7:11 AM
Hello,

I'm using GXT 2.0 M1 and am my Drag & Drop is acting funky. The DnD is one way, from one Grid on which I called new GridDragSource() to another grid to which I called new GridDropTarget().

The DnD works as expected in hosted mode (IE6) and compiled mode Firefox. However, in compiled IE6 and IE7 the mouse cursor does not lose the appended image.

Screenshot attached.

Thanks,
Stan

sven
12 May 2009, 7:25 AM
Please post a complete testcase.

stan229
12 May 2009, 7:40 AM
Ok. So here's the snippets:
The "Source" of the Dragging is a Grid<BeanModel> known as Patient List. In my form class I call this method to instantiate it, add a Selection listener, a store listener and then return the list.



private PatientList getPatientList() {
patientList = new PatientList();
new GridDragSource(patientList.getPatientList());

patientList.getPatientList().getSelectionModel().addListener(
Events.SelectionChange,
new Listener<SelectionChangedEvent<BeanModel>>() {
public void handleEvent(SelectionChangedEvent<BeanModel> be) {
selectedPatient = be.getSelectedItem();
if (selectedPatient != null) {
patientBindings.bind(selectedPatient);
patientForm.expand();
} else {
patientBindings.unbind();
patientForm.collapse();
}
}
});

patientList.getPatientListStore().addStoreListener(
new StoreListener<BeanModel>() {
@Override
public void storeUpdate(StoreEvent<BeanModel> se) {
// Call A Persistence Service
}
});
return patientList;


The "Target" is another Grid<BeanModel> using the same type of bean object called ReportOnGrid



private ReportOnGridWidget getReportOnGrid() {
reportOnGrid = new ReportOnGridWidget(patientList.getPatientListStore());
GridDropTarget target = new GridDropTarget(reportOnGrid
.getReportOnGrid());
target.addDNDListener(new DNDListener() {
@Override
public void dragStart(DNDEvent e) {
if (patientForm.isValid()) {
super.dragStart(e);
}
}

@Override
public void dragEnter(DNDEvent e) {
if (patientForm.isValid()) {
super.dragEnter(e);
} else {
e.stopEvent();
e.setCancelled(true);
}
}

});
return reportOnGrid;
}


Note: The overridden DND listener does not affect the issue, I tried removing it as well. I solution would be if I could somehow reset the mouse cursor in the dragDrop(DNDEvent) method.

So the workflow is:
Take a valid item from PatientList. Drag and Drop It into ReportOnGrid. The cursor image disappears while in the grid panel, however once I move the cursor anywhere the cursor image reappears. I tried clicking randomly and it did not remove it. This only occurs in GWT Hosted Browser --> Compiled view in IE6 & IE7. Hosted Mode (IE6) and Firefox 3.0.10 work fine

Thank you.

sven
12 May 2009, 7:46 AM
I need a complete testcase that i can just run (http://www.extjs.com/forum/showthread.php?t=40289). I am unable to reproduce the issue and it is also not visible in the examples:

http://www.extjs.com/examples-dev/explorer.html#gridtogrid

stan229
12 May 2009, 9:33 AM
Ok I understand. I'll try to create a test case as a last resort.

I have some more evidence that might help.
I switched the feedback to INSERT. What I noticed is that it looks like it doesn't end the "DnD process" What I mean is that when I return to the target grid I can keep dropping the same source object.

Could it be something to do with that the two grids have different column models?

I really appreciate the prompt responses. Thank you

I'll add the code to create the two grids



private Grid<BeanModel> createPatientList() {
RpcProxy<List<NyccPatient>> proxy = new RpcProxy<List<NyccPatient>>() {

@Override
protected void load(Object loadConfig,
AsyncCallback<List<NyccPatient>> callback) {
NYCCPatientService.Util.getInstance().getAllPatients(callback);
}

};
BeanModelReader reader = new BeanModelReader();
ListLoader<ListLoadResult<ModelData>> loader = new BaseListLoader<ListLoadResult<ModelData>>(
proxy, reader);
loader.addLoadListener(new PatientLoadListener(patientLookupStatus));
patientListStore = new ListStore<BeanModel>(loader);
loader.load();

List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
columns.add(new ColumnConfig("nyccLastName", "Last Name", 150));
columns.add(new ColumnConfig("nyccFirstName", "First Name", 150));

ColumnModel cm = new ColumnModel(columns);
patientList = new Grid<BeanModel>(patientListStore, cm);
patientList.setStripeRows(true);

GridView view = new GridView();
view.setAutoFill(true);
view.setForceFit(true);
patientList.setView(view);

patientList.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
patientList.setAutoHeight(true);
patientList.setBorders(true);

new GridDragSource(patientList);
return patientList;
}




private Grid<BeanModel> addReportOnGrid() {
List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
columns.add(new ColumnConfig("nyccLastName", "Last Name", 150));
columns.add(new ColumnConfig("nyccFirstName", "First Name", 150));
columns.add(new ColumnConfig("nyccVnsMrn", "VNS MRN", 50));
columns.add(new ColumnConfig("nyccSeenBy", "Seen By", 150));

ColumnConfig seenByTsColumn = new ColumnConfig("nyccSeenTimestamp",
"Date Seen", 75);
seenByTsColumn.setRenderer(new GridCellRenderer<BeanModel>() {

public String render(BeanModel model, String property,
ColumnData config, int rowIndex, int colIndex,
ListStore<BeanModel> store) {
return DateTimeFormat.getFormat("MM/dd/yyyy").format(
(Date) model.get(property));
}
});
columns.add(seenByTsColumn);
columns.add(new ColumnConfig("nyccActionId", "Action", 100));
columns.add(new ColumnConfig("nyccResultId", "Result", 100));
columns.add(new ColumnConfig("nyccComments", "Comments", 200));

ColumnModel cm = new ColumnModel(columns);

store = new ListStore<BeanModel>();

reportOnGrid = new Grid<BeanModel>(store, cm);
GridSelectionModel<BeanModel> selectionModel = new GridSelectionModel<BeanModel>();
selectionModel.setLocked(true);
reportOnGrid.setSelectionModel(selectionModel);
reportOnGrid.setAutoExpandColumn("nyccComments");
GridView view = new GridView();
view.setAutoFill(true);
view.setForceFit(true);
view.setEmptyText("Drag Patients Here");
reportOnGrid.setView(view);
reportOnGrid.setStripeRows(true);
reportOnGrid.setHeight(300);
reportOnGrid.setAutoWidth(true);
reportOnGrid.setBorders(true);

return reportOnGrid;

}

stan229
12 May 2009, 10:00 AM
I noticed an issue with the example for Grid to Grid DnD that I also experienced:

Here's the steps to recreate:
1) Drag one item into the second grid (Ex. Cisco)
2) Drag another item into the second grid (Ex. Intel)
3) Mouse over the second grid and it is not possible to highlight Intel unless you click on Cisco and press the down arrow.

Could this somehow relate to my issue?

stan229
12 May 2009, 11:10 AM
Ok.
Sven I'm so sorry to inconvience you but I figured out the issue. I accidentally called new GridDragSource() twice. Once in the form class and the other in the class it initialized. I feel like a major . I do hope that other issue I pointed can get some attention though.

Thanks!

sven
12 May 2009, 11:15 AM
I fixed the second one already. Even before the report. It will be in M2.

zooxmusic1
2 Jul 2009, 11:57 AM
I am having an issue where the cursor is not disappearing if your mouse moves outside of the inner window in IE 7. I am using 2.0-M3

1.) Open IE 7
2.) go to the Grid to Grid example in your samples war (it happens in them all except image organizer and the domino effect is even worse on the tree)
3.) Drag any item up and out of the browswer window (such as the IE toolbar or address bar)
4.) Release the mouse button
5.) now drag back into the window.

The cursor is not being released.

sven
2 Jul 2009, 12:15 PM
This is unfixable. There are no events fired if you leave the browserwindow.

zooxmusic1
2 Jul 2009, 12:20 PM
So your saying there is absolutely no way to determine when you approach and breach the boundaries of the controllable window so that you can release that cursor?