PDA

View Full Version : [CLOSED] Very strange problem with vboxlayout



feanor91
Sep 19, 2013, 2:28 PM
Hello

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>


Result at first run is :

6914

If I move Panel3 avbove Panel2, by drag and drop with the help of the plugin, all is good:

6913

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);


I get that:

6915

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

Daniil
Sep 19, 2013, 4:18 PM
Hi @feanor91,

Reproduced. I will investigate.

Daniil
Sep 20, 2013, 4:04 AM
This

MyLblPanel3.AddCls("police-normal");
is executed after layouting.

The AddCls method and many other similar are supposed to be used if a component is already rendered. So, in your case please use:

MyLblPanel3.Cls = "police-normal";

feanor91
Sep 20, 2013, 7:13 AM
Thanks a lot, it works.

Subsidiary question : is there a way to force layout to refresh once component is drawn?

Daniil
Sep 20, 2013, 10:12 AM
By calling the doLayout method.

App.wndTest.doLayout();

feanor91
Sep 20, 2013, 11:33 AM
Thanks a lot