On Fri, Dec 19, 2008 at 4:45 PM, Jim Hunter <[email protected]> wrote:
> I have a 'tool' that I am porting from .7 that is in need of using the
> qx.ui.container.Scroll control but am having trouble getting it to do what I
> want. In all the examples I have seen, when the scroll is created it's size
> is set to a predetermined size. I don't have that luxury. What I have is a
> Dock control that has a couple of HBox panels docked 'north' and a couple of
> HBox panels docked 'south' and I want the Scroll to take up all available
> space in the middle. When I tried to dock it and not provide any location
> information aside from 'edge:north' it fills from left to right, but seems
> to have a default height of around 200 so my content is forced to scroll in
> a small strip. If I try and add it to the Dock using 'edge:center' I don't
> get any scroll panel at all. If I try and use 'edge:"north", flex:1' or
> 'edge:"center", flex:1' I also don't get anything. What is the preferred way
> to get a scrolling region in the center of my page? There is nothing to the
> right or left just to the top and bottom.
>
> It looks like this:
>
> ----------------------------------------
> | Dock panel (fills entire screen)
> | -------------------------------------
> | | HBox (fixed height) edge:north
> | ------------------------------------
> | | HBox (fixed height) edge:north
> | -------------------------------------
> | | Scroll (variable height)
> | |
> | | this region needs to both grow taller or shorter depending on the
> screen size
> | | and the heights of the HBoxes and it need to scroll it's contents
> | |
> | |
> | ------------------------------------
> | | HBox (fixed height) edge:south
> | -------------------------------------
> | | HBox (fixed height) edge:south
> | ------------------------------------
> --------------------------------------
>
> I am open to any suggestions.
Jim, I've never played with the Dock layout, but what you're attempting can
be done with the VBox layout. The following example is just like what you
described except that the Dock is replaced by a VBox.
/*
#require(qx.log.appender.Native)
#require(qx.log.appender.Console)
*/
qx.Class.define("custom.Application",
{
extend : qx.application.Standalone,
members :
{
main: function()
{
this.base(arguments);
var container = new qx.ui.container.Composite(new
qx.ui.layout.VBox());
this.getRoot().add(container, { edge : 0 });
var o;
o = new qx.ui.core.Widget();
o.set(
{
backgroundColor : "red"
});
container.add(o);
o = new qx.ui.core.Widget();
o.set(
{
backgroundColor : "green"
});
container.add(o);
var scrollContainer = new qx.ui.container.Scroll();
container.add(scrollContainer, { flex : 1 });
var scroller = new qx.ui.container.Composite(new qx.ui.layout.VBox());
scrollContainer.add(scroller);
var hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(4));
scroller.add(hBox);
o = new qx.ui.basic.Label("hello world");
o.setHeight(50);
hBox.add(o);
var group = new qx.ui.form.RadioGroup();
for (var i = 1; i < 100; i++)
{
o = new qx.ui.form.RadioButton("Option " + i);
scroller.add(o);
if (i == 70)
{
group.setSelected(o);
}
}
scrollContainer.scrollToY(0);
o = new qx.ui.core.Widget();
o.set(
{
backgroundColor : "green"
});
container.add(o);
o = new qx.ui.core.Widget();
o.set(
{
backgroundColor : "red"
});
container.add(o);
}
}
});
Hope that helps.
Derrell
------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
