[FIXED] [2.0.1] Drag and Drop - X to TreePanel

[CrizztlCoder]

- Detailed description of the problem
Dropping two or more items on an expanded TreePanel causes an exception and the dropped items disappear. Items in later expanded Nodes aren't shown either, nor are items you drop later.
(Tested with ListView to TreePanel and TreePanel to TreePanel)
If you enter something in a TreeFilterField and then erase it again, everything is back to normal!

- GXT version
2.0.1
2.0.2 (Ext GWT Explorer)

- Host mode / web mode / both
2.0.1: Both
2.0.2: Web

- Browser and version
Both: FF 3.5.2, IE8

- Operating System
WinXP Prof SP3

Exception:
Shown by Hosted Mode Jetty:

[ERROR] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (TypeError): 'firstChild' is null or not an object
 number: -2146823281
 description: 'firstChild' is null or not an object
    at com.google.gwt.dom.client.DOMImpl.getFirstChildElement(Native Method)
    at com.google.gwt.dom.client.Element$.getFirstChildElement$(Element.java:172)
    at com.extjs.gxt.ui.client.widget.treepanel.TreePanel.doUpdate(TreePanel.java:946)
    at com.extjs.gxt.ui.client.widget.treepanel.TreePanel$3.handleEvent(TreePanel.java:1402)
    at com.extjs.gxt.ui.client.util.DelayedTask$1.run(DelayedTask.java:30)
    at com.extjs.gxt.ui.client.util.DelayedTask.delay(DelayedTask.java:52)
    at com.extjs.gxt.ui.client.widget.treepanel.TreePanel.update(TreePanel.java:1406)
    at com.extjs.gxt.ui.client.widget.treepanel.TreePanel.onExpand(TreePanel.java:1216)
    at com.extjs.gxt.ui.client.widget.treepanel.TreePanel.setExpanded(TreePanel.java:742)
    at com.extjs.gxt.ui.client.widget.treepanel.TreePanel.setExpanded(TreePanel.java:724)
    at com.extjs.gxt.ui.client.widget.treepanel.TreePanel.toggle(TreePanel.java:847)
    at com.extjs.gxt.ui.client.widget.treepanel.TreePanel.onClick(TreePanel.java:1073)
    at com.extjs.gxt.ui.client.widget.treepanel.TreePanel.onComponentEvent(TreePanel.java:547)
    at com.extjs.gxt.ui.client.widget.Component.onBrowserEvent(Component.java:760)
    at com.google.gwt.user.client.DOM.dispatchEventImpl(DOM.java:1320)
    at com.google.gwt.user.client.DOM.dispatchEventAndCatch(DOM.java:1299)
    at com.google.gwt.user.client.DOM.dispatchEvent(DOM.java:1262)

Shown by e.printStackTrace():

com.google.gwt.core.client.JavaScriptException: (TypeError): 'insertAdjacentHTML' is null or not an object
 number: -2146823281
 description: 'insertAdjacentHTML' is null or not an object
    at com.extjs.gxt.ui.client.core.DomHelper.insertBefore(Native Method)
    at com.extjs.gxt.ui.client.widget.treepanel.TreePanel.onAdd(TreePanel.java:1026)
    at com.extjs.gxt.ui.client.widget.treepanel.TreePanel$1.storeAdd(TreePanel.java:280)
    at com.extjs.gxt.ui.client.store.StoreListener.handleEvent(StoreListener.java:22)
    at com.extjs.gxt.ui.client.store.StoreListener.handleEvent(StoreListener.java:1)
    at com.extjs.gxt.ui.client.event.BaseObservable.callListener(BaseObservable.java:176)
    at com.extjs.gxt.ui.client.event.BaseObservable.fireEvent(BaseObservable.java:96)
    at com.extjs.gxt.ui.client.store.TreeStore.doInsert(TreeStore.java:799)
    at com.extjs.gxt.ui.client.store.TreeStore.insert(TreeStore.java:523)
    at com.extjs.gxt.ui.client.dnd.TreePanelDropTarget.appendModel(TreePanelDropTarget.java:124)
    at com.extjs.gxt.ui.client.dnd.TreePanelDropTarget.handleAppendDrop(TreePanelDropTarget.java:167)
    at com.extjs.gxt.ui.client.dnd.TreePanelDropTarget.onDragDrop(TreePanelDropTarget.java:250)
    at Test$BugTree$3.onDragDrop(BugTestProj.java:108)
    at com.extjs.gxt.ui.client.dnd.DropTarget.handleDrop(DropTarget.java:405)
    at com.extjs.gxt.ui.client.dnd.DNDManager.handleDragEnd(DNDManager.java:121)
    at com.extjs.gxt.ui.client.dnd.DragSource.onDraggableDragEnd(DragSource.java:277)
    at com.extjs.gxt.ui.client.dnd.DragSource.access$1(DragSource.java:270)
    at com.extjs.gxt.ui.client.dnd.DragSource$1.dragEnd(DragSource.java:99)
    at com.extjs.gxt.ui.client.event.DragListener.handleEvent(DragListener.java:21)
    at com.extjs.gxt.ui.client.event.DragListener.handleEvent(DragListener.java:1)
    at com.extjs.gxt.ui.client.event.BaseObservable.callListener(BaseObservable.java:176)
    at com.extjs.gxt.ui.client.event.BaseObservable.fireEvent(BaseObservable.java:96)
    at com.extjs.gxt.ui.client.fx.Draggable.stopDrag(Draggable.java:689)
    at com.extjs.gxt.ui.client.fx.Draggable$2.onPreview(Draggable.java:150)
    at com.extjs.gxt.ui.client.util.BaseEventPreview.onPreviewNativeEvent(BaseEventPreview.java:145)
    at com.google.gwt.user.client.Event$NativePreviewEvent.dispatch(Event.java:181)
    at com.google.gwt.user.client.Event$NativePreviewEvent.dispatch(Event.java:1)
    at com.google.gwt.event.shared.HandlerManager$HandlerRegistry.fireEvent(HandlerManager.java:60)
    at com.google.gwt.event.shared.HandlerManager$HandlerRegistry.access$1(HandlerManager.java:53)
    at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:178)
    at com.google.gwt.user.client.Event$NativePreviewEvent.fire(Event.java:80)
    at com.google.gwt.user.client.Event$NativePreviewEvent.access$4(Event.java:73)
    at com.google.gwt.user.client.Event$.fireNativePreviewEvent(Event.java:412)
    at com.google.gwt.user.client.DOM.previewEvent(DOM.java:1284)

To reproduce the error use one of the following:

2.0.1:

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.dnd.ListViewDragSource;
import com.extjs.gxt.ui.client.dnd.ListViewDropTarget;
import com.extjs.gxt.ui.client.dnd.TreePanelDragSource;
import com.extjs.gxt.ui.client.dnd.TreePanelDropTarget;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.Store;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.ListView;
import com.extjs.gxt.ui.client.widget.form.StoreFilterField;
import com.extjs.gxt.ui.client.widget.layout.ColumnData;
import com.extjs.gxt.ui.client.widget.layout.ColumnLayout;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanel;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class Test implements EntryPoint {

    public void onModuleLoad() {
        ContentPanel mainPanel = new ContentPanel();
        mainPanel.setSize(1000, 600);
        mainPanel.setHeaderVisible(true);
        mainPanel.setHeading("mainPanel");
        mainPanel.setLayout(new ColumnLayout());
        mainPanel.setBodyBorder(true);

        //TreePanel for dragging
        BugTree bugTree = new BugTree();
        BugList bugList = new BugList();
        
        mainPanel.add(bugTree, new ColumnData(0.5));
        mainPanel.add(bugList, new ColumnData(0.5));
        
        RootPanel.get().add(mainPanel);
    }
    
    public class BugTree extends LayoutContainer {
        @SuppressWarnings("unchecked")
        @Override
        protected void onRender(Element parent, int index) {
            super.onRender(parent, index);
            
            final TreeStore<ModelData> store = new TreeStore<ModelData>();
            for(int i = 0; i < 2; i++) {
                TreeCategory tmp = new TreeCategory(i);
                store.add(tmp, false);
                for(int n = 0; n < 2; n++) {
                    store.add(tmp, new TreeEntry(n), false);
                }
            }
            
            final TreePanel<ModelData> tree = new TreePanel<ModelData>(store) {
                @Override  
                protected boolean hasChildren(ModelData model) {  
                    if (model instanceof TreeCategory) {  
                        return true;  
                    }  
                    return super.hasChildren(model);  
                }
            };
            tree.setDisplayProperty("name");
            tree.setWidth(250);
            
            final StoreFilterField<ModelData> filter = new StoreFilterField<ModelData>() {
                @Override
                protected boolean doSelect(Store<ModelData> store,
                        ModelData parent, ModelData record, String property,
                        String filter) {
                    if (record instanceof TreeCategory) {
                        return false;
                    }
                    String name = record.get("name");
                    name = name.toLowerCase();
                    if (name.contains(filter.toLowerCase())) {
                        return true;
                    }
                    return false;
                }
            };
            filter.bind(store);
            
            VerticalPanel panel = new VerticalPanel();
            panel.addStyleName("x-small-editor");
            panel.setSpacing(8);
            panel.add(filter);
            panel.add(tree);
            
            new TreePanelDragSource(tree);
            new TreePanelDropTarget(tree) {
                @Override
                protected void onDragDrop(DNDEvent event) {
                    try {
                        super.onDragDrop(event);
                    }
                    catch (Exception e) {
                        e.printStackTrace();
                        
                    }
                }
            };
            
            add(panel);
        }
    }
    
    @SuppressWarnings("unchecked")
    public class TreeEntry implements ModelData {
        private Map<String, Object> props;
        
        public TreeEntry(int n) {
            props = new HashMap<String, Object>();
            props.put("name", "Entry" + n);
        }
        
        public <X> X get(String property) {
            return (X)props.get(property);
        }
        
        public Map<String, Object> getProperties() {
            return props;
        }
        public Collection<String> getPropertyNames() {
            return props.keySet();
        }
        public <X> X remove(String property) {
            return (X)props.remove(property);
        }
        public <X> X set(String property, X value) {
                return (X)props.put(property, value);
        }    
    }
    
    @SuppressWarnings("unchecked")
    public class TreeCategory implements ModelData {
        private Map<String, Object> props;
        
        public TreeCategory(int i) {
            props = new HashMap<String, Object>();
            props.put("name", "Cat" + i);
        }
        
        public <X> X get(String property) {
            return (X)props.get(property);
        }
        
        public Map<String, Object> getProperties() {
            return props;
        }
        public Collection<String> getPropertyNames() {
            return props.keySet();
        }
        public <X> X remove(String property) {
            return (X)props.remove(property);
        }
        public <X> X set(String property, X value) {
                return (X)props.put(property, value);
        }
    }
    
    @SuppressWarnings("unchecked")
    public class BugList extends LayoutContainer {
        @Override
        public void onRender(Element parent, int index) {
            super.onRender(parent, index);
            
            ListView<ModelData> view = new ListView<ModelData>();
            view.setStore(new ListStore<ModelData>());
            view.setDisplayProperty("name");
            view.setHeight(300);
            view.setWidth(250);
            
            new ListViewDragSource(view);  
            new ListViewDropTarget(view);
            
            add(view);
        }
    }
}

It is also thrown when you expand the first node, drag both items out, expand and unexpand the second node and then drop them on the second.
It is NOT thrown, when you expand the first node, drag both items out, expand the first node again and drop them in again.

2.0.2:

open http://www.extjs.com/examples-dev/ex...tml#treetotree
In the explorer, multi-drag is disabled so you have to

1. Click one item
2. Hold Ctrl / Shift
3. Click another item and hold the mousebutton (should this be possible?)
4. Drag and Drop it!

So now lets do it:
Reload site
Expand "Binding"
Dropping "Basic Binding" & "Grid Binding" to "My Files" (unexpanded) --> GOOD

Reload site
Expand "Binding"
Dropping "Basic Binding" & "Grid Binding" to "My Files" (expanded) --> BAD

Reload site
Expand "Binding" and "Button"
Dropping "Basic Binding" & "Grid Binding" to "My Files" (unexpanded) --> GOOD
Dropping "Basic Binding" & "Grid Binding" back to "Button" --> BAD

Reload site
Expand "Binding" and "Button"
Dropping "Basic Binding" & "Grid Binding" to "My Files" (unexpanded) --> GOOD
Dropping "Basic Binding" & "Grid Binding" back to "Forms" --> GOOD

P.S.: Great job, I love gxt!

[sven]

I updated the examples-dev site to the newest version. I cant reproduce that anymore:

http://www.extjs.com/examples-dev/ex...tml#treetotree

[CrizztlCoder]

Me neither, seems to work.

[sven]

Great. Marking this as FNR than.

[CrizztlCoder]

Edit: My bad, all fine

[dfreis]

the cause of this one is within:
com.extjs.gxt.ui.client.widget.treepanel.getContainer(TreeNode)
line 87, because node.getElement() might be null!

called by com.extjs.gxt.ui.client.widget.treepanel.TreePanel.onRemove(TreeStoreEvent<M>):1406 (moveFocus(view.getContainer(node))) which seems to be new