PDA

View Full Version : TabItem/LayoutContainer and scrolling



larvelljones
23 May 2008, 7:05 AM
Hi. I'm having trouble getting scrolling to work properly. With the following code, the behavior I'm seeing is that the whole TabItem scrolls. The desired behavior is to only scroll the LayoutContainer that holds the tree. If I simply remove scrolling on the tab item, it turns off scrolling altogether. Any ideas on how to have only the Tree component scroll? I have this same problem in other areas. I guess the general problem is scrolling a child LayoutContainer within another LayoutContainer.

TIA


TabItem item = new TabItem();
item.setScrollMode(Style.Scroll.AUTO);
item.setText(name);
item.setIconStyle("icon-tabs");

LayoutContainer container = new LayoutContainer();
item.add(container);
tree tree = new Tree();

ToolBar toolbar = new ToolBar();
...
container.add(toolbar);

LayoutContainer treeWrapper = new LayoutContainer();
treeWrapper.setScrollMode(Style.Scroll.AUTO);
treeWrapper.add(tree);
container.add(treeWrapper);
container.layout();

walkerr
12 Jun 2008, 5:57 AM
Wondering if anyone has looked at / responded to this.

I'm stuck on the same problem - a Window, with several child components, one of which is a LayoutContainer. I just want scrolling on that single child of the outer Window.

darrellmeyer
12 Jun 2008, 7:12 AM
If you provide complete test code I will take a look.

walkerr
13 Jun 2008, 12:35 AM
Thanks Darrell

It's hard to extract an example - because there's a lot of scaffold code from our infrastructure around it. I've split out the key sections relating to layout though, hopefully this will show what we're trying to do.

Basically - we have a Window, and we want just one of it's inner components (msgContainer) to have scroll bars if it's content are too large, and also adjust/revisit the layout and need for scroll bars if the window is resized by user.

The contents themselves can change from either Html or Text, depending on what our server returns.




public class LogDetailDialog extends Window implements ViewPanel
{

...

// Standard menu buttons
protected ToolBar logMenuBar;

protected TextToolItem btnFwd = new TextToolItem();
protected TextToolItem btnBack = new TextToolItem();
protected ToggleToolItem tglPretty = new ToggleToolItem();
protected TextToolItem btnClose = new TextToolItem();

protected HorizontalPanel pnlMsgInfo = new HorizontalPanel();
protected Label lblMsgDate = new Label();
protected Label lblMsgSrc = new Label();

protected LayoutContainer msgContainer = new LayoutContainer();

//////////////////////////////////////////////////
// CONSTRUCTORS
//////////////////////////////////////////////////

public LogDetailDialog()
{
super();

setSize(600, 250);
setHeading("Log Mesage Detail");
setResizable(true);
setDraggable(true);
setClosable(false);
setLayoutOnChange(true);
setMonitorResize(true);

this.logMenuBar = new ToolBar();
btnBack.setIconStyle("icon-back");
btnBack.addSelectionListener(new MyBackListener());
btnBack.setToolTip("Show previous log message.");
this.logMenuBar.add(btnBack);

btnFwd.setIconStyle("icon-fwd");
btnFwd.addSelectionListener(new MyFwdListener());
btnFwd.setToolTip("Show next log message.");
this.logMenuBar.add(btnFwd);

tglPretty.setIconStyle("icon-pretty");
tglPretty.addSelectionListener(new MyPrettyListener());
tglPretty.setToolTip("Table view of message.");
this.logMenuBar.add(tglPretty);

this.logMenuBar.add(new FillToolItem());

btnClose.setIconStyle("icon-close");
btnClose.addSelectionListener(new MyCloseListener());
btnClose.setToolTip("Close log message detail window.");
this.logMenuBar.add(btnClose);
setTopComponent(this.logMenuBar);

pnlMsgInfo.setSpacing(10);
pnlMsgInfo.add(lblMsgDate);
pnlMsgInfo.add(lblMsgSrc);
add(pnlMsgInfo);

msgContainer.setLayout(new FlowLayout());
msgContainer.setScrollMode(Scroll.AUTO);
msgContainer.setLayoutOnChange(true);
msgContainer.setMonitorResize(true);
add(msgContainer);

RootPanel.get().add(this);
}

...

// this routine receives new message data and adds to the inner content panel
protected void updateMsg(EnvLogEvent msg)
{
Component msgComp = null;

if (msg != null)
{
msgContainer.removeAll();

lblMsgDate.setText("Date: " + msg.getDate());
lblMsgSrc.setText("Source: " + msg.getSource());

int type = this.determineFormatType(msg);

if (tglPretty.isPressed() && type == TYPE_VTALK)
{
msgComp = new Html(formatVtalkMsg(msg.getText()));
}
else if (tglPretty.isPressed() && type == TYPE_XML)
{
msgComp = new Html(formatXmlMsg(msg.getText()));
}
else if (type == TYPE_HTML)
{
msgComp = new Html(msg.getText());
}
else
{
msgComp = new Text(msg.getText());
}

msgComp.setStyleAttribute("backgroundColor", "white");
msgContainer.add(msgComp);
}
}


The msgContainer does resize - but scroll bars never appear if it's too small for the content.

We could possibly use a different design - but this is a refactor of existing GWT code to use GXT, so we want to keep the Window look close to the original to minimise "user shock" of the new version

walkerr
17 Jun 2008, 5:45 AM
Just tried beta5 in hope this might be better.

Can't seem to find a way to have a LayoutContainer as a single component within an outer Window, and get just the children (in this case a single Text or Html widget) of this container scroll if the space for the children isn't enough to show them all.

Maybe I'm missing something obvious here?

darrellmeyer
17 Jun 2008, 8:21 AM
You need to simply your test code and put it in this format (http://extjs.com/forum/showthread.php?t=33778).

dpope22
25 Jun 2008, 9:30 AM
I'm having the same issue. Trying to get a LayoutContainer inside a TabItem to scroll. Any updates on this???

darrellmeyer
25 Jun 2008, 9:40 AM
Please provide some test code and I will take a look.

walkerr
25 Jun 2008, 10:27 PM
I'm having the same issue. Trying to get a LayoutContainer inside a TabItem to scroll. Any updates on this???

I'm afraid I just didn't get time to try and hack a standalone example for the guys to look at - I did manage to hack my way around it though, by forcing the size of the inner layout container

In our window constructor:


public class LogDetailDialog extends Window implements Listener
{
...
public LogDetailDialog()
{
super();
...
setResizable(true);
setDraggable(true);
setClosable(false);
setLayoutOnChange(true);
setMonitorWindowResize(true);
setLayout(new FlowLayout());
...
//msgContainer is the inner layout container
msgContainer.setLayout(new FlowLayout());
msgContainer.setScrollMode(Scroll.AUTO);
msgContainer.setLayoutOnChange(true);
msgContainer.setMonitorWindowResize(true);
add(msgContainer);

addListener(Events.Resize, this);


Then later on we force the size on either a layout or resize event - for some resizing without the resize listener, it didn't always redo the layout when the Window was resized:


/**
* This is a bit of a hack - but without, we don't seem to get scroll
* bars on the detail area.
*/
public boolean layout()
{
boolean retval = super.layout();

//TODO: prob missing something obvious, but seem to need kludge amounts to
// get scrollers in right place
int h = getHeight(true) - pnlMsgInfo.getOffsetHeight() - getTopComponent().getOffsetHeight() -30;
int w = getWidth(true)- 15;
msgContainer.setSize(w, h);
msgContainer.layout();

return retval;
}

//////////////////////////////////////////////////
// INTERFACE METHODS - Listener
//////////////////////////////////////////////////

public void handleEvent(BaseEvent be)
{
layout();
}

Finally, we also make sure a re-layout whenever we change/add a different widget to out inner layout container


if (msg != null)
{
msgContainer.removeAll();
....
msgContainer.add(msgComp);
layout();
}


We had to fiddle with the "fudge factor" numbers in the resize amounts, but that aside we now always get scrollbars on our inner layout container when needed e.g. after a resize or after a component with too much text is added