PDA

View Full Version : Can't duplicate the draggable demo



babyblue
22 Aug 2009, 3:13 PM
http://extjs.com/examples-dev/explorer.html#draggable

My sample code below is exactly the same as the draggable demo, but some how it seems that the horizontal panel in mine does not get resized to the same size as LayoutContainer, which then is restricting the space of the second and third item.


package com.example.client;

import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.Style.VerticalAlignment;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.fx.Draggable;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.HorizontalPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.ToggleButton;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;

public class TestDraggable {
LayoutContainer container;

public void onModuleLoad() {
RootPanel.get("toolbar").add(createToolbar());
RootPanel.get("main").add(createPanel());
}

private LayoutContainer createToolbar() {
ToolBar toolbar = new ToolBar();
ToggleButton toggle = new ToggleButton("Toggle");
toggle.addSelectionListener(new SelectionListener<ButtonEvent>(){
@Override
public void componentSelected(ButtonEvent ce){
actionPerformed();
}
});
toolbar.add(toggle);
LayoutContainer parent = new LayoutContainer();
parent.add(toolbar);
return parent;
}

private LayoutContainer createPanel() {
container = new LayoutContainer() {
@Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);

HorizontalPanel vp = new HorizontalPanel();
vp.setVerticalAlign(VerticalAlignment.TOP);
vp.setSpacing(10);

ContentPanel cp = new ContentPanel();
cp.setCollapsible(true);
cp.setBodyStyleName("pad-text");
cp.setHeading("Proxy Drag");
cp.addText("Some Text");
cp.setWidth(200);

Draggable d = new Draggable(cp);

vp.add(cp);

cp = new ContentPanel();
cp.setCollapsible(true);
cp.setBodyStyle("padding: 4 8px;fontSize: 12px");
cp.setHeading("Direct Drag");
cp.addText("Drags can only be started from the header.");
cp.setWidth(200);
vp.add(cp);

d = new Draggable(cp, cp.getHeader());
d.setContainer(this);
d.setUseProxy(false);

cp = new ContentPanel();
cp.setBodyStyle("padding: 4 8px;fontSize: 12px");
cp.setHeading("Constrain");
cp.addText("Can only be dragged vertically.");
cp.setWidth(200);
vp.add(cp);

d = new Draggable(cp, cp.getHeader());
d.setContainer(this);
d.setConstrainHorizontal(true);

add(vp);
setScrollMode(Scroll.AUTO);
}

};
return container;
}

private void actionPerformed() {
}
}

babyblue
24 Aug 2009, 10:36 AM
Any idea? I'm using XP and IE6 in hosted mode, I also tried firefox.