Sep 19, 2013, 2:28 PM
[CLOSED] Very strange problem with vboxlayout
Hello
Please see code below:
If I move Panel3 avbove Panel2, by drag and drop with the help of the plugin, all is good:
and if I change order of the renderer like that :
Can you please explain what happened, and how can I achieve good behaviour at first run?
All 3 panels are constructed in the same way, of course....(as far as I can see)
Edit: add graylabel style to code
Please see code below:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void DrawContent(object sender, EventArgs e)
{
string Size = "Normal";
Ext.Net.PanelHeader MyPanelHeader = new Ext.Net.PanelHeader();
Ext.Net.VBoxLayoutConfig MyPanelLayoutConfig = new Ext.Net.VBoxLayoutConfig();
Ext.Net.Panel MyPanel1 = new Ext.Net.Panel();
Ext.Net.PanelHeader MyPanel1Header = new Ext.Net.PanelHeader();
Ext.Net.Label MyLblPanel1 = new Ext.Net.Label();
Ext.Net.Panel MyPanel2 = new Ext.Net.Panel();
Ext.Net.PanelHeader MyPanel2Header = new Ext.Net.PanelHeader();
Ext.Net.Label MyLblPanel2 = new Ext.Net.Label();
Ext.Net.Panel MyPanel3 = new Ext.Net.Panel();
Ext.Net.PanelHeader MyPanel3Header = new Ext.Net.PanelHeader();
Ext.Net.Label MyLblPanel3 = new Ext.Net.Label();
if (Size == "Small")
{
MyPanelHeader.AddCls("police-size-small");
}
else if (Size == "Large")
{
MyPanelHeader.AddCls("police-size-large");
}
MyPanelLayoutConfig.Align = Ext.Net.VBoxAlign.Center;
MyPanelLayoutConfig.Pack = Ext.Net.BoxPack.Center;
MyPanelLayoutConfig.DefaultMargins = "5";
MyPanel1Header.ID = "Panel1Header";
MyPanel1.HeaderConfig = MyPanel1Header;
MyPanel1.LayoutConfig.Add(MyPanelLayoutConfig);
MyPanel1.TitleAlign = Ext.Net.TitleAlign.Center;
MyPanel1.Title = "Panel1";
MyPanel1.ID = "panel1";
MyPanel1.Flex = 1;
MyPanel1.BodyCls = "x-panel-body-vm";
MyLblPanel1.ID = "lblPanel1";
MyLblPanel1.Text = "254";
MyLblPanel1.BaseCls = "graylabel";
if (Size == "Small")
{
MyLblPanel1.AddCls("police-small");
}
else if (Size == "Large")
{
MyLblPanel1.AddCls("police-large");
}
else
{
MyLblPanel1.AddCls("police-normal");
}
MyPanel1.Items.Add(MyLblPanel1);
MyPanel2Header.ID = "Panel2Header";
MyPanel2.HeaderConfig = MyPanel2Header;
MyPanel2.LayoutConfig.Add(MyPanelLayoutConfig);
MyPanel2.TitleAlign = Ext.Net.TitleAlign.Center;
MyPanel2.Title = "Panel2";
MyPanel2.ID = "panel2";
MyPanel2.Flex = 1;
MyPanel2.BodyCls = "x-panel-body-vm";
MyLblPanel2.ID = "lblPanel2";
MyLblPanel2.Text = "48";
MyLblPanel2.BaseCls = "graylabel";
if (Size == "Small")
{
MyLblPanel2.AddCls("police-small");
}
else if (Size == "Large")
{
MyLblPanel2.AddCls("police-large");
}
else
{
MyLblPanel2.AddCls("police-normal");
}
MyPanel2.Items.Add(MyLblPanel2);
MyPanel3Header.ID = "Panel3Header";
MyPanel3.HeaderConfig = MyPanel3Header;
MyPanel3.LayoutConfig.Add(MyPanelLayoutConfig);
MyPanel3.TitleAlign = Ext.Net.TitleAlign.Center;
MyPanel3.Title = "Panel3";
MyPanel3.ID = "panel3";
MyPanel3.Flex = 1;
MyPanel3.BodyCls = "x-panel-body-vm";
MyLblPanel3.ID = "lblPanel3";
MyLblPanel3.Text = "183";
MyLblPanel3.BaseCls = "graylabel";
if (Size == "Small")
{
MyLblPanel3.AddCls("police-small");
}
else if (Size == "Large")
{
MyLblPanel3.AddCls("police-large");
}
else
{
MyLblPanel3.AddCls("police-normal");
}
MyLblPanel3.Border = true;
MyPanel3.Items.Add(MyLblPanel3);
MyPanel1.Render("wndTest", RenderMode.AddTo);
MyPanel2.Render("wndTest", RenderMode.AddTo);
MyPanel3.Render("wndTest", RenderMode.AddTo);
}
protected void Page_Load(object sender, EventArgs e)
{
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.police-normal
{
font-size:36px !important;
}
.police-small
{
font-size:18px !important;
}
.police-large
{
font-size:72px !important;
}
.x-panel-body-vm
{
background-color: #C9CBE2 !important;
}
.graylabel
{
text-align:center;
background-color: transparent;
font-weight:bold;
color : #000000 !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" RethrowAjaxExceptions="True"></ext:ResourceManager>
<ext:Desktop
ID="MyDesktop"
runat="server">
<DesktopConfig ID="DesktopConfig1" runat="server">
</DesktopConfig>
<Modules>
<%-- Template window--%>
<ext:DesktopModule ModuleID="Template">
<Window>
<ext:Window
runat="server"
ID="wndTest"
Width="200"
Height="350"
ExpandOnShow="True"
TitleCollapse="false"
Collapsible="false"
Layout="VBoxLayout"
Maximizable="false"
Minimizable="false"
Closable="false"
Resizable="true"
Title="Test"
TitleAlign="Center"
X="100"
Y="100">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" DefaultMargins="5" />
</LayoutConfig>
<Plugins>
<ext:BoxReorderer runat="server" />
</Plugins>
<DirectEvents>
<Show OnEvent="DrawContent"></Show>
</DirectEvents>
</ext:Window>
</Window>
</ext:DesktopModule>
</Modules>
<StartMenu Height="300" Title="Start Here" runat="server" HideTools="True">
<MenuItems>
<ext:MenuItem Text="Tools" Icon="Wrench">
<Menu>
<ext:Menu ID="mnuTemplate" runat="server">
<Items>
<ext:MenuItem Text="Charts template" Icon="Eye">
<Listeners>
<Click Handler="#{MyDesktop}.getModule('Template').createWindow();" />
</Listeners>
</ext:MenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:MenuItem>
</MenuItems>
</StartMenu>
<TaskBar runat="server" TrayWidth="50">
<TrayClock runat="server" ></TrayClock>
</TaskBar>
</ext:Desktop> </form>
</body>
</html>If I move Panel3 avbove Panel2, by drag and drop with the help of the plugin, all is good:
and if I change order of the renderer like that :
MyPanel1.Render("wndTest", RenderMode.AddTo);
MyPanel3.Render("wndTest", RenderMode.AddTo);
MyPanel2.Render("wndTest", RenderMode.AddTo);Can you please explain what happened, and how can I achieve good behaviour at first run?
All 3 panels are constructed in the same way, of course....(as far as I can see)
Edit: add graylabel style to code
Last edited by Daniil; Sep 20, 2013 at 11:53 AM.
Reason: [CLOSED]
