Drag and drop tree doesnt refresh?

[Leh8]

Hi all,

Been trying to get a simple drag and drop tree working. It works ok until its a copy operation. So for example, if you drag item1 to SubParent1 and drag another item1 to SubParent2. Then try to drag item1 back to the list, the tree doesnt refresh by removing the item1 even though the store underneath removes it correctly... Any idea what i'm doing wrong or could this be a bug?




public class DNDTreeExample extends LayoutContainer
{
TreeStore<ModelData> treeStore;
TreeBinder<ModelData> treeBinder;

public DNDTreeExample()
{
this.setLayout(new FlowLayout(0));

TabPanel tabContainer = new TabPanel();
tabContainer.add(getTab1());

this.add(tabContainer);
}

private TabItem getTab1()
{
// Tab item
TabItem dndTab = new TabItem("DND items");
dndTab.setHeight(4000);

ContentPanel centerConfigPanel = new ContentPanel();
dndTab.add(centerConfigPanel);

// Create the List store for the list view.
ListStore<ModelData> store = new ListStore<ModelData>();
List<ModelData> testData = new ArrayList<ModelData>();
BaseModel listItem = new BaseModel();
listItem.set("name", "Item1");
testData.add(listItem);
listItem = new BaseModel();
listItem.set("name", "Item2");
testData.add(listItem);
store.add(testData);

// Create the List view and set the store.
ListView<ModelData> listItems = new ListView<ModelData>();
listItems.setStore(store);
listItems.setDisplayProperty("name");

dndTab.add(listItems);

// Make the Listview draggable and droppable.
new ListViewDragSource(listItems);
new ListViewDropTarget(listItems);

// Create the Tree.
Tree tree = new Tree();
treeStore = new TreeStore<ModelData>();
treeBinder = new TreeBinder<ModelData>(tree, treeStore);
treeBinder.setDisplayProperty("name");
treeBinder.setAutoLoad(true);

TreeDropTarget treeDNDTarget = new TreeDropTarget(treeBinder);
treeDNDTarget.setOperation(Operation.COPY);

// Make the tree draggable and droppable.
new TreeDragSource(treeBinder);

dndTab.add(tree);

// Build the tree with sample data.
DeferredCommand.addCommand(new Command()
{
public void execute()
{
buildTree();
}
});

return dndTab;
}

private void buildTree()
{
BaseTreeModel parentNode = createTreeNode("parent");
BaseTreeModel subParentNode = createTreeNode("SubParent1");
parentNode.add(subParentNode);

subParentNode.add(createTreeNode("Child1"));

subParentNode = createTreeNode("SubParent2");
parentNode.add(subParentNode);

subParentNode.add(createTreeNode("Child2"));

treeStore.add(parentNode, true);
}

private BaseTreeModel createTreeNode(String name)
{
BaseTreeModel childNode = new BaseTreeModel();
childNode.set("name", name);

return childNode;
}
}




Kind regards,

L

[Leh8]

Sorry, heres the runnable class with an entry point just to make it easier to run. Its a bit strange how fiddling around with DND particularly duplicates produces issues as mentioned above. Been using ext version 1.2.1 on IE6, perhaps there are still issues with DND as I'm trying to drag an item from a list to a tree?




public class DNDTreeExample extends LayoutContainer implements EntryPoint
{
private TreeStore<ModelData> treeStore;
private TreeBinder<ModelData> treeBinder;

public void onModuleLoad()
{
this.setLayout(new FlowLayout(0));

TabPanel tabContainer = new TabPanel();
tabContainer.add(getTab1());

this.add(tabContainer);
RootPanel.get("DNDTreeExample").add(this);
}

private TabItem getTab1()
{
// Tab item
TabItem dndTab = new TabItem("DND items");
dndTab.setHeight(4000);

ContentPanel centerConfigPanel = new ContentPanel();
dndTab.add(centerConfigPanel);

// Create the List store for the list view.
ListStore<ModelData> store = new ListStore<ModelData>();
List<ModelData> testData = new ArrayList<ModelData>();
BaseModel listItem = new BaseModel();
listItem.set("name", "Item1");
testData.add(listItem);
listItem = new BaseModel();
listItem.set("name", "Item2");
testData.add(listItem);
store.add(testData);

// Create the List view and set the store.
ListView<ModelData> listItems = new ListView<ModelData>();
listItems.setStore(store);
listItems.setDisplayProperty("name");

dndTab.add(listItems);

// Make the Listview draggable and droppable.
new ListViewDragSource(listItems);
new ListViewDropTarget(listItems);

// Create the Tree.
Tree tree = new Tree();
treeStore = new TreeStore<ModelData>();
treeBinder = new TreeBinder<ModelData>(tree, treeStore);
treeBinder.setDisplayProperty("name");
treeBinder.setAutoLoad(true);

TreeDropTarget treeDNDTarget = new TreeDropTarget(treeBinder);
treeDNDTarget.setOperation(Operation.COPY);

// Make the tree draggable and droppable.
new TreeDragSource(treeBinder);

dndTab.add(tree);

// Build the tree with sample data.
DeferredCommand.addCommand(new Command()
{
public void execute()
{
buildTree();
}
});

return dndTab;
}

private void buildTree()
{
BaseTreeModel parentNode = createTreeNode("parent");
BaseTreeModel subParentNode = createTreeNode("SubParent1");
parentNode.add(subParentNode);

subParentNode.add(createTreeNode("Child1"));

subParentNode = createTreeNode("SubParent2");
parentNode.add(subParentNode);

subParentNode.add(createTreeNode("Child2"));

treeStore.add(parentNode, true);
}

private BaseTreeModel createTreeNode(String name)
{
BaseTreeModel childNode = new BaseTreeModel();
childNode.set("name", name);

return childNode;
}
}

[gslender]

...not 100% sure, but try making the list model items BaseTreeModel instead of BaseModel - the issue from my thinking is that TreeDropTarget assumes you are dropping from a tree source, and the models are copied from the source into the target... this might be why it adds the model, but can't be displayed :D

[Leh8]

Thanks for the reply and suggestion gslender. Unfortunately its a no go, didnt make much of a difference. Anyone else having similar issues with drag and drop to a tree? I guess alternatively, is there a way to refresh the tree?


Updated code here for those interested ~o)



public class DNDTreeExample extends LayoutContainer implements EntryPoint
{
private TreeStore<BaseTreeModel> treeStore;
private TreeBinder<BaseTreeModel> treeBinder;

public void onModuleLoad()
{
this.setLayout(new FlowLayout(0));

TabPanel tabContainer = new TabPanel();
tabContainer.add(getTab1());

this.add(tabContainer);
RootPanel.get("DNDTreeExample").add(this);
}

private TabItem getTab1()
{
// Tab item
TabItem dndTab = new TabItem("DND items");
dndTab.setHeight(4000);

ContentPanel centerConfigPanel = new ContentPanel();
dndTab.add(centerConfigPanel);

// Create the List store for the list view.
ListStore<BaseTreeModel> store = new ListStore<BaseTreeModel>();
List<BaseTreeModel> testData = new ArrayList<BaseTreeModel>();
BaseTreeModel listItem = new BaseTreeModel();
listItem.set("name", "Item1");
testData.add(listItem);
listItem = new BaseTreeModel();
listItem.set("name", "Item2");
testData.add(listItem);
store.add(testData);

// Create the List view and set the store.
ListView<BaseTreeModel> listItems = new ListView<BaseTreeModel>();
listItems.setStore(store);
listItems.setDisplayProperty("name");

dndTab.add(listItems);

// Make the Listview draggable and droppable.
new ListViewDragSource(listItems);
new ListViewDropTarget(listItems);

// Create the Tree.
Tree tree = new Tree();
treeStore = new TreeStore<BaseTreeModel>();
treeBinder = new TreeBinder<BaseTreeModel>(tree, treeStore);
treeBinder.setDisplayProperty("name");
treeBinder.setAutoLoad(true);

TreeDropTarget treeDNDTarget = new TreeDropTarget(treeBinder);
treeDNDTarget.setOperation(Operation.COPY);

// Make the tree draggable and droppable.
new TreeDragSource(treeBinder);

dndTab.add(tree);

// Build the tree with sample data.
DeferredCommand.addCommand(new Command()
{
public void execute()
{
buildTree();
}
});

return dndTab;
}

private void buildTree()
{
BaseTreeModel parentNode = createTreeNode("parent");
BaseTreeModel subParentNode = createTreeNode("SubParent1");
parentNode.add(subParentNode);

subParentNode.add(createTreeNode("Child1"));

subParentNode = createTreeNode("SubParent2");
parentNode.add(subParentNode);

subParentNode.add(createTreeNode("Child2"));

treeStore.add(parentNode, true);
}

private BaseTreeModel createTreeNode(String name)
{
BaseTreeModel childNode = new BaseTreeModel();
childNode.set("name", name);

return childNode;
}
}


Kind Regards,

L

[gslender]

I tried your example (latest) and it works fine. What specifically doesn't work?

[Leh8]

Hello again,

These are the steps I took:

1. Drag item1 from the list to subParent1 on the tree - Works
2. Drag another item1 from the list to subParent2 on the tree - Works
3. Drag item1 under subParent1 from the TREE to the list - Works, it removes it from the tree
4. Drag item1 under subParent2 from the TREE to the list - Fails, it doesnt remove the second item1 from the tree.

It works fine when you dont have duplicates items copied to the tree, like a Operation.MOVE, it appears to screw up when you have duplicated items under the same branch level.

Hope your able to reproduce it with those steps :-?


Kind Regards,

L

[gslender]

I won't get a chance to try this again for a couple of days... sorry.

[Leh8]

Not a problem, anyone else up for a go :D

Perhaps I've used it in a way thats unconventional... B)