PDA

View Full Version : Can't replicate draggable demo



babyblue
3 Sep 2009, 9:49 AM
http://extjs.com/examples-dev/explorer.html#draggable

- GXT version: 2.0.1
- Host mode and web mode
- Browser and version: Chrome 2.0.1, Firefox 3.5, IE 6
- Operating System: Windows XP

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. First item, proxy drag, looks ok in IE but not in chrome or firefox, once you drag it pass the horizontal panel and let go, scroll bars for the horizontal panel shows up, and the item is still inside the horizontal panel.


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() {
}
}

Colin Alworth
5 Sep 2009, 3:10 AM
Starting with the obvious, but are you using gxt-all.css and the correct doctype?