First time here? Check out the FAQ!
![]() | 1 | initial version | |
Hi everybody, I've two grids in a container. Each grid must be flexible, such as the container. I need to show only one grid at a time, because they show different kind of data, and I've thought to use the "visible" attribute to get it.
When I load the page, the first grid is 100% wide even if it has no elements to show: ok. Then I switch to second grid, that has no elements to show and it too is 100% wide: ok. Now I switch again to the first one, and it's 50% wide: not ok.
Here is some sample code.
flex_grid.zul
<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<hlayout apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('eu.dedalus.pst.esercizio.FlexGridVM')"
vflex="1">
<button label="Switch grid" onClick="@command('doSwitchGrid')" />
<grid hflex="1" vflex="1" emptyMessage="No elements in first grid"
visible="@load(vm.firstGridVisible)">
<columns>
<column label="Name" hflex="1" />
<column label="Surname" hflex="1" />
<column label="Birthday" hflex="min" />
<column label="City" hflex="min" />
<column label="Note" hflex="2" />
</columns>
</grid>
<grid hflex="1" vflex="1" emptyMessage="No elements in second grid"
visible="@load(not vm.firstGridVisible)">
<columns>
<column label="Note" hflex="2" />
<column label="City" hflex="min" />
<column label="Birthday" hflex="min" />
<column label="Surname" hflex="1" />
<column label="Name" hflex="1" />
</columns>
</grid>
</hlayout>
</zk>
FlexGridVM
public class FlexGridVM {
private boolean firstGridVisible;
@Init
public void init() {
firstGridVisible = true;
}
public boolean isFirstGridVisible() {
return firstGridVisible;
}
public void setFirstGridVisible(boolean firstGridVisible) {
this.firstGridVisible = firstGridVisible;
}
@Command
@NotifyChange("firstGridVisible")
public void doSwitchGrid() {
firstGridVisible = !firstGridVisible;
}
}
The sample is really clear I hope.
If you set a fixed width to the <hlayout>
, the behaviour is the same.
If you use the <hbox>
, surprisingly you will get 3 differents behaviour.
1. If you set a fixed width, i.e. hflex="1000px", or width="100%", the behaviour is the expected one
2. If you set hflex="1", the behaviour is the same of <hlayout>
3. If you set neither width nor hflex, each time you switch the visibility, the first grid width increases each time of the half of the previous free space (?!)
Now, I could solve my problem using <hbox width="100%">
but I'd prefer to use <hlayout>
: is there a way to obtain the same result using it?
<hlayout>
and <hbox>
are supposed to behave identically in this context?
Is the <hbox>
behaviour correct, or there's a bug (obviously case 3 is a bug)?
Thanx for your help,
Roberto
![]() | 2 | No.2 Revision |
Hi everybody, I've two grids in a container. Each grid must be flexible, such as the container. I need to show only one grid at a time, because they show different kind of data, and I've thought to use the "visible" attribute to get it.
When I load the page, the first grid is 100% wide even if it has no elements to show: ok. Then I switch to second grid, that has no elements to show and it too is 100% wide: ok. Now I switch again to the first one, and it's 50% wide: not ok.
Here is some sample code.
flex_grid.zul
<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<hlayout apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('eu.dedalus.pst.esercizio.FlexGridVM')"
vflex="1">
<button label="Switch grid" onClick="@command('doSwitchGrid')" />
<grid hflex="1" vflex="1" emptyMessage="No elements in first grid"
visible="@load(vm.firstGridVisible)">
<columns>
<column label="Name" hflex="1" />
<column label="Surname" hflex="1" />
<column label="Birthday" hflex="min" />
<column label="City" hflex="min" />
<column label="Note" hflex="2" />
</columns>
</grid>
<grid hflex="1" vflex="1" emptyMessage="No elements in second grid"
visible="@load(not vm.firstGridVisible)">
<columns>
<column label="Note" hflex="2" />
<column label="City" hflex="min" />
<column label="Birthday" hflex="min" />
<column label="Surname" hflex="1" />
<column label="Name" hflex="1" />
</columns>
</grid>
</hlayout>
</zk>
FlexGridVM
public class FlexGridVM {
private boolean firstGridVisible;
@Init
public void init() {
firstGridVisible = true;
}
public boolean isFirstGridVisible() {
return firstGridVisible;
}
public void setFirstGridVisible(boolean firstGridVisible) {
this.firstGridVisible = firstGridVisible;
}
@Command
@NotifyChange("firstGridVisible")
public void doSwitchGrid() {
firstGridVisible = !firstGridVisible;
}
}
The sample is really clear I hope.
If you set a fixed width to the <hlayout>
, the behaviour is the same.
If you use the <hbox>
, surprisingly you will get 3 differents behaviour.
1. behaviour.
<hlayout>
Now, I could solve my problem using <hbox width="100%">
but I'd prefer to use <hlayout>
: is there a way to obtain the same result using it?
<hlayout>
and <hbox>
are supposed to behave identically in this context?
Is the <hbox>
behaviour correct, or there's a bug (obviously case 3 is a bug)?
Thanx for your help,
Roberto