Pmithrandir
5 Dec 2008, 8:27 AM
Hello
I'have a tree on the left side of my website with differents sorts of item. (INPUT, TEXTAREA, etc...)
On the right side, I have a portal element.
I wan't to create a INPUT item when the user drop a treeItem on the portal.
My problem is that I detect the DragEnter event, but the drop is forbidden and i don't have DragDrop event.
How can I change the list of authorize Item for drop.
In the futur, I wan't to create a Input on the fly when I fire the dragEnter Event to define the position of my INPUT.
Can you help me ?
Thanks
Pierre
/*
* Ext GWT - Ext for GWT Copyright(c) 2007, 2008, Ext JS, LLC.
* licensing@extjs.com http://extjs.com/license
*/
package form.app.client;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.dnd.DropTarget;
import com.extjs.gxt.ui.client.dnd.TreeDragSource;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.DNDEvent;
import com.extjs.gxt.ui.client.event.DNDListener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.button.ToolButton;
import com.extjs.gxt.ui.client.widget.custom.Portal;
import com.extjs.gxt.ui.client.widget.custom.Portlet;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.tree.Tree;
import com.extjs.gxt.ui.client.widget.tree.TreeItem;
public class MonPortal extends LayoutContainer {
public MonPortal() {
this.setLayout(new BorderLayout());
final LayoutContainer north = new LayoutContainer();
final BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,
30);
final ContentPanel west = new ContentPanel();
west.setHeading("Navigation");
west.setBorders(false);
west.setBodyStyle("fontSize: 12px; padding: 6px");
// nav.addText(TestData.DUMMY_TEXT_SHORT);
// data of the tree
TreeItem t1 = new TreeItem("item1");
TreeItem t2 = new TreeItem("item2");
TreeItem t3 = new TreeItem("item3");
// Tree object
final Tree myTree = new Tree();
myTree.getRootItem().add(t1);
t1.add(t2);
t1.add(t3);
DNDListener listenerDrag = new DNDListener() {
public void dragStart(DNDEvent e) {
TreeItem item = myTree.findItem(e.getTarget());
if (item != null && item == myTree.getRootItem().getItem(0)) {
e.doit = false;
e.status.setStatus(false);
return;
}
super.dragStart(e);
}
};
TreeDragSource tree = new TreeDragSource(myTree);
tree.addDNDListener(listenerDrag);
west.add(myTree);
final BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST,
200, 100, 300);
westData.setMargins(new Margins(5, 0, 5, 5));
westData.setCollapsible(true);
final Portal portal = new Portal(3);
portal.setBorders(true);
portal.setStyleAttribute("backgroundColor", "white");
portal.setColumnWidth(0, .33);
portal.setColumnWidth(1, .33);
portal.setColumnWidth(2, .33);
DNDListener listenerDrop = new DNDListener() {
@Override
public void dragDrop(DNDEvent e) {
Info.display("Message", "Your fake data was saved", "");
TreeItem item = myTree.findItem(e.getTarget());
if (item != null && item == myTree.getRootItem().getItem(0)) {
portal.add(creerPortlet(item),0);
}
super.dragDrop(e);
}
@Override
public void dragEnter(DNDEvent e) {
Info.display("Message", "dragEnter", "");
super.dragEnter(e);
}
};
DropTarget d = new DropTarget(portal);
d.addDNDListener(listenerDrop);
portal.add(creerPortlet(t1),0);
final BorderLayoutData centerData = new BorderLayoutData(
LayoutRegion.CENTER);
centerData.setMargins(new Margins(5));
this.add(north, northData);
this.add(west, westData);
this.add(portal, centerData);
}
private String getBogusText() {
// return "<div class=text style='padding: 5px'>" +
// TestData.DUMMY_TEXT_SHORT + "</div>";
return "<div class=text style='padding: 5px'></div>";
}
private void configPanel(final ContentPanel panel) {
panel.setCollapsible(true);
panel.setAnimCollapse(false);
panel.getHeader().addTool(new ToolButton("x-tool-gear"));
panel.getHeader().addTool(
new ToolButton("x-tool-close", new SelectionListener<ComponentEvent>() {
@Override
public void componentSelected(final ComponentEvent ce) {
panel.removeFromParent();
}
}));
}
private Portlet creerPortlet(TreeItem ti){
Portlet portlet = new Portlet();
portlet.setHeading(ti.getText());
this.configPanel(portlet);
portlet.addText(this.getBogusText());
return portlet;
}
}
I'have a tree on the left side of my website with differents sorts of item. (INPUT, TEXTAREA, etc...)
On the right side, I have a portal element.
I wan't to create a INPUT item when the user drop a treeItem on the portal.
My problem is that I detect the DragEnter event, but the drop is forbidden and i don't have DragDrop event.
How can I change the list of authorize Item for drop.
In the futur, I wan't to create a Input on the fly when I fire the dragEnter Event to define the position of my INPUT.
Can you help me ?
Thanks
Pierre
/*
* Ext GWT - Ext for GWT Copyright(c) 2007, 2008, Ext JS, LLC.
* licensing@extjs.com http://extjs.com/license
*/
package form.app.client;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.dnd.DropTarget;
import com.extjs.gxt.ui.client.dnd.TreeDragSource;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.DNDEvent;
import com.extjs.gxt.ui.client.event.DNDListener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.button.ToolButton;
import com.extjs.gxt.ui.client.widget.custom.Portal;
import com.extjs.gxt.ui.client.widget.custom.Portlet;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.tree.Tree;
import com.extjs.gxt.ui.client.widget.tree.TreeItem;
public class MonPortal extends LayoutContainer {
public MonPortal() {
this.setLayout(new BorderLayout());
final LayoutContainer north = new LayoutContainer();
final BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,
30);
final ContentPanel west = new ContentPanel();
west.setHeading("Navigation");
west.setBorders(false);
west.setBodyStyle("fontSize: 12px; padding: 6px");
// nav.addText(TestData.DUMMY_TEXT_SHORT);
// data of the tree
TreeItem t1 = new TreeItem("item1");
TreeItem t2 = new TreeItem("item2");
TreeItem t3 = new TreeItem("item3");
// Tree object
final Tree myTree = new Tree();
myTree.getRootItem().add(t1);
t1.add(t2);
t1.add(t3);
DNDListener listenerDrag = new DNDListener() {
public void dragStart(DNDEvent e) {
TreeItem item = myTree.findItem(e.getTarget());
if (item != null && item == myTree.getRootItem().getItem(0)) {
e.doit = false;
e.status.setStatus(false);
return;
}
super.dragStart(e);
}
};
TreeDragSource tree = new TreeDragSource(myTree);
tree.addDNDListener(listenerDrag);
west.add(myTree);
final BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST,
200, 100, 300);
westData.setMargins(new Margins(5, 0, 5, 5));
westData.setCollapsible(true);
final Portal portal = new Portal(3);
portal.setBorders(true);
portal.setStyleAttribute("backgroundColor", "white");
portal.setColumnWidth(0, .33);
portal.setColumnWidth(1, .33);
portal.setColumnWidth(2, .33);
DNDListener listenerDrop = new DNDListener() {
@Override
public void dragDrop(DNDEvent e) {
Info.display("Message", "Your fake data was saved", "");
TreeItem item = myTree.findItem(e.getTarget());
if (item != null && item == myTree.getRootItem().getItem(0)) {
portal.add(creerPortlet(item),0);
}
super.dragDrop(e);
}
@Override
public void dragEnter(DNDEvent e) {
Info.display("Message", "dragEnter", "");
super.dragEnter(e);
}
};
DropTarget d = new DropTarget(portal);
d.addDNDListener(listenerDrop);
portal.add(creerPortlet(t1),0);
final BorderLayoutData centerData = new BorderLayoutData(
LayoutRegion.CENTER);
centerData.setMargins(new Margins(5));
this.add(north, northData);
this.add(west, westData);
this.add(portal, centerData);
}
private String getBogusText() {
// return "<div class=text style='padding: 5px'>" +
// TestData.DUMMY_TEXT_SHORT + "</div>";
return "<div class=text style='padding: 5px'></div>";
}
private void configPanel(final ContentPanel panel) {
panel.setCollapsible(true);
panel.setAnimCollapse(false);
panel.getHeader().addTool(new ToolButton("x-tool-gear"));
panel.getHeader().addTool(
new ToolButton("x-tool-close", new SelectionListener<ComponentEvent>() {
@Override
public void componentSelected(final ComponentEvent ce) {
panel.removeFromParent();
}
}));
}
private Portlet creerPortlet(TreeItem ti){
Portlet portlet = new Portlet();
portlet.setHeading(ti.getText());
this.configPanel(portlet);
portlet.addText(this.getBogusText());
return portlet;
}
}