Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I am using columnLayout to divide screen into 3 columns (west, Center, East). I am using panels inside columns to show some contents. I want east and West columns to hide when i maximize panel in center column. Also minimize of the center panel should restore contents to original (something like portalLayout). Can someone help me achieve that. My code looks something like following -
Thanks in advance.
<?page title="Column Layout" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Column Layout" border="normal">
<columnlayout>
<columnchildren id="c1" width="20%" style="padding: 5px" >
<panel height="100px" framable="true" title="column1-2"
border="normal" maximizable="true" style="margin-bottom:10px">
<panelchildren>Panel</panelchildren>
</panel>
<panel height="100px" title="column1-3" border="normal"
closable="true">
<panelchildren>Panel</panelchildren>
</panel>
</columnchildren>
<columnchildren id="c2" width="60%" style="padding: 5px" >
<panel height="100px" framable="true" title="column1-2"
border="normal" maximizable="true" style="margin-bottom:10px"
sizable="true" onMaximize="doMax()" onMinimize="doMin()">
<panelchildren>Panel</panelchildren>
</panel>
</columnchildren>
<columnchildren id="c3" width="20%" style="padding: 5px">
<panel height="100px" framable="true" title="column1-2"
border="normal" maximizable="true" style="margin-bottom:10px">
<panelchildren>Panel</panelchildren>
</panel>
</columnchildren>
</columnlayout>
<zscript><![CDATA[
void doMax(){
c1.setVisible(false);
//c11.width="0%";
c2.width="100%";
//c3.width="0%";
c3.setVisible(false);
}
void doMin(){
c1.setVisible(true);
c1.width="20%";
c2.setVisible(false);
//c2.width="60%";
c3.width="20%";
c3.setVisible(true);
}
]]></zscript>
</window>
</zk>
I was able to solve this with the code that looks like following -
<?page title="Column Layout" contentType="text/html;charset=UTF-8"?>
<zk>
<borderlayout id="bl" width="100%" height="100%">
<center flex="true">
<columnlayout height="100%" width="100%">
<columnchildren id="c1" width="20%" style="padding: 5px" height="100%">
<panel height="100px" framable="true" title="column1-2"
border="none" maximizable="true" style="margin-bottom:10px">
<panelchildren>Panel</panelchildren>
</panel>
<panel height="100px" title="column1-3" border="normal"
closable="true">
<panelchildren>Panel</panelchildren>
</panel>
</columnchildren>
<columnchildren id="c2" width="60%" style="padding: 5px" height="100%">
<panel height="100px" framable="true" title="column1-2" minimizable="true"
border="none" maximizable="true" style="margin-bottom:10px"
sizable="true" onMaximize="doMax(event)">
<panelchildren>Panel</panelchildren>
</panel>
</columnchildren>
<columnchildren id="c3" width="20%" style="padding: 5px" height="100%">
<panel height="100px" framable="true" title="column1-2"
border="none" maximizable="true" style="margin-bottom:10px">
<panelchildren>Panel</panelchildren>
</panel>
</columnchildren>
</columnlayout>
</center>
<east id="e" title="East" size="10%" border="normal" flex="true" vflex="min" collapsible="true" minsize="50">
<label value="10%" style="color:gray;font-size:30px" />
</east>
</borderlayout>
<zscript><![CDATA[
void doMax(MaximizeEvent event){
if (event.isMaximized()){
//c1.set
c1.setVisible(false);
//c11.width="0%";
c2.width="100%";
c2.setHeight("100%");
//c3.width="0%";
c3.setVisible(false);
e.setOpen(false);
}else{
c1.setVisible(true);
c1.width="20%";
//c2.setVisible(false);
c2.width="60%";
c2.setHeight("100px");
c3.width="20%";
c3.setVisible(true);
e.setOpen(true);
}
}
]]></zscript>
</zk>
Asked: 2011-12-20 06:47:18 +0800
Seen: 192 times
Last updated: Dec 21 '11
