Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
For a complex grid/row display I'm having to use the MVC model and this requires that the columns be dynamically created to fit a variable number of data columns.
For each column header I have to create a mixed image + label display like:
Column aColumn = new Column();
aColumn.setAlign("right");
aColumn.setWidth("9%");
aGrid.getColumns().getChildren().add(aColumn);
Hlayout aLayout = new Hlayout();
aLayout.setParent(aColumn);
// show =/-
String anImageStr = null;
if (aNode.isCompressed()) {
anImageStr = "/image/icon/column_header_compressed.png";
}
else {
anImageStr = "/image/icon/column_header_expanded.png";
}
Image anImage = new Image(anImageStr);
anImage.addEventListener("onClick", getHeaderImageEventListener());
setComponentNodeID(anImage,aNode.getEntityID());
anImage.setParent(aLayout);
// then title
Label aLabel = new Label(aNode.getEntityTitle());
aLabel.setParent(aLayout);
Hi,
From this sample, the label and image is the children of hlayout and hlayout is for 'horizontal' alignment.
You can call grid.invalidate() to redraw it.
Regards,
Ben
Hi,
You can try use an outer div to wrap both label and image and then use an inner div to break them as below:
<zk>
<zscript><![CDATA[
import org.zkoss.zul.*;
public void addColumn(Columns columns) {
Column aColumn = new Column();
aColumn.setAlign("right");
aColumn.setWidth("9%");
columns.getChildren().add(aColumn);
Hlayout aLayout = new Hlayout();
Div div = new Div();
aLayout.setParent(aColumn);
div.setParent(aLayout);
new Image("/img/Centigrade-Widget-Icons/ArrowLeftGreen-16x16.png").setParent(div);
new Div().setParent(div);
// then title
new Label("test label").setParent(div);
}
]]></zscript>
<grid>
<columns onCreate="addColumn(self);" />
</grid>
</zk>
Regards,
Ben
Asked: 2012-06-22 07:06:44 +0800
Seen: 205 times
Last updated: Jul 02 '12