Hello @Rafaelcjr!
Thanks for your investigation in the matter.
Well, a container's layout only governs over items added inside the container, not free html code. In other words,
Layout="FitLayout" will only work on components inside the container if they are defined inside a
<items></items> block. It is expected not to work if you used
<content></content>.
This thread's response is still actual to this concept and may help clarifying it:
Items vs Content.
So it is expected the
YOUR SAMPLE Using <CONTENT> section from your post not to work the way you expected.
I see you miss the
FitLayout block that did this in Ext.NET 1.0, and that's missing since version 2, probably because it couldn't work in all situations.
As for the sample using content, I found you could make the content fit to the screen's height, by giving the problematic div the "100%" style. And the following just works:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body>
<form runat="server" id="fm1">
<div>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="Fit">
<Items>
<ext:Panel ID="TargetPanel"
runat="server"
BodyPadding="15" >
<Listeners>
<AfterRender Handler="item.getContentTarget().getFirstChild().setHeight('100%');" />
</Listeners>
<Content>
<asp:Panel ID="Content_ASPPanel" runat="server"
style="height:100%; border: 2px solid blue;">
This panel is fit 100% Height and 100% Width within its container.
</asp:Panel>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>
I agree there should be an easier way to tell that div should fit 100% height when bound to the container. Understand that the content enclosed by the
<content/> block is rendered separately to the page, and when the panel is rendered, it is pulled inside the panel's body, as the thread linked above explains.
Want to do it differently? Define your custom content somewhere else and pull it in the panel, like this:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body>
<form runat="server" id="fm1">
<div>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="Fit">
<Items>
<ext:Panel ID="TargetPanel"
runat="server"
BodyPadding="15"
ContentEl="Content_ASPPanel">
</ext:Panel>
</Items>
</ext:Viewport>
</div>
<asp:Panel ID="Content_ASPPanel" runat="server"
style="height:100%; border: 2px solid blue;" CssClass="x-hidden">
This panel is fit 100% Height and 100% Width within its container.
</asp:Panel>
</form>
</body>
</html>
... or like this, if you want to keep the code tied to the panel:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body>
<form runat="server" id="fm1">
<div>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="Fit">
<Items>
<ext:Panel ID="TargetPanel"
runat="server"
BodyPadding="15"
ContentEl="Content_ASPPanel">
</ext:Panel>
</Items>
<HtmlBin>
<asp:Panel ID="Content_ASPPanel" runat="server"
style="height:100%; border: 2px solid blue;" CssClass="x-hidden">
This panel is fit 100% Height and 100% Width within its container.
</asp:Panel>
</HtmlBin>
</ext:Viewport>
</div>
</form>
</body>
</html>
I hope this helps!