PDA

View Full Version : [CLOSED] Basic TabPanel Troubles



opendat2000
Sep 16, 2016, 4:42 PM
Hi Community !

Please check the code sample below:



<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
}

protected void Button1_Click(object sender, DirectEventArgs e)
{
FormPanel2.Reset();
Example();

Window2.Show();
}
protected void Example()
{
FormPanel3.Items.Add(new TextField
{
FieldLabel = "FieldLabel1"
,
Name = "FieldLabel1"
,
ID = "FieldLabel1"
,
EnableKeyEvents = true
,
Text = "FieldLabel1"
});

FormPanel3.Items.Add(new TextField
{
FieldLabel = "FieldLabel2"
,
Name = "FieldLabel2"
,
ID = "FieldLabel2"
,
EnableKeyEvents = true
,
Text = "FieldLabel2"
});

FormPanel3.Items.Add(new TextField
{
FieldLabel = "FieldLabel3"
,
Name = "FieldLabel3"
,
ID = "FieldLabel3"
,
EnableKeyEvents = true
,
Text = "FieldLabel3"
});

FormPanel3.Items.Add(new TextField
{
FieldLabel = "FieldLabel4"
,
Name = "FieldLabel4"
,
ID = "FieldLabel4"
,
EnableKeyEvents = true
,
Text = "FieldLabel4"
});

FormPanel3.Items.Add(new TextField
{
FieldLabel = "FieldLabel5"
,
Name = "FieldLabel5"
,
ID = "FieldLabel5"
,
EnableKeyEvents = true
,
Text = "FieldLabel5"
});

FormPanel3.Reset();
FormPanel3.Render(Window2, RenderMode.AddTo);
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Edit Form View - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>

<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" Theme="Neptune" />

<ext:Window ID="Window1" runat="server"
Title="Window1"
Icon="ApplicationEdit"
Width="800"
Height="400"
BodyPadding="15"
Resizable="false"
Closable="false"
Layout="Fit">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server"
Border="false"
Layout="Form">
<Items>
<ext:Button ID="Button1" runat="server" Text="Open Window 2" >
<DirectEvents>
<Click OnEvent="Button1_Click" ></Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:FormPanel>
</Items>
</ext:Window>

<ext:Window ID="Window2" runat="server"
Title="Plain TabPanel - Ext.NET Examples"
Modal="true"
Width="350"
Height="220"
Layout="Fit"
Hidden="true"
Closable="true">
<Items>
<ext:TabPanel ID="TabPanel1" runat="server">
<Items>
<ext:FormPanel ID="FormPanel2" runat="server"
BodyPadding="10" Title="Tab1"
DefaultAnchor="100%">
<Defaults>
<ext:Parameter Name="Anchor" Value="95%" />
<ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
<ext:Parameter Name="SelectOnFocus" Value="true" Mode="Raw" />
<ext:Parameter Name="MsgTarget" Value="side" />
</Defaults>
<Items>
<ext:TextField ID="TextField1" runat="server" FieldLabel="Name" BlankText="Name is required" />
<ext:DateField ID="DateField1" runat="server" FieldLabel="Birthdate" BlankText="Birthdate is required" />
</Items>
</ext:FormPanel>
<ext:FormPanel ID="FormPanel3" runat="server"
LabelWidth="75" Title="Tab2"
ButtonAlign="Right"
Border="false"
Padding="10">
<Defaults>
<ext:Parameter Name="Anchor" Value="95%" />
<ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
<ext:Parameter Name="SelectOnFocus" Value="true" Mode="Raw" />
<ext:Parameter Name="MsgTarget" Value="side" />
</Defaults>
<Items>
</Items>
</ext:FormPanel>
</Items>
</ext:TabPanel>
</Items>
</ext:Window>
</form>
</body>
</html>


I have problems presenting / displaying the "TabPanel" control the second Tab is not displayed. I created a simple example to clarify my problem.

Step 1. Click Button "Open Window 2"

24745

Step 2. Tab "2" is not displayed

24746

Step 3. Comment procedure "Example"

24747

Can you help with the code?

I accept suggestions ideas or comments

opendat2000
Sep 20, 2016, 2:41 PM
Hello Ext .Net!

Please answer me ...

fabricio.murta
Sep 20, 2016, 8:55 PM
Hello Mauricio!

We're working on your question right now! Sorry for the delay!

fabricio.murta
Sep 20, 2016, 9:22 PM
...and hello again!

I will tell you what to do to fix your example. If that's confuse, let us know and we'll paste a working copy.

First, go to your line 83. Delete it completely.

Then, in your Example() method (comprised by lines 15-84), you will change all:

FormPanel3.Items.Add(<component_here>);

To:

<component_Here>.AddTo(FormPanel3);

And, it will work just fine!

This happens because the <outer_component>.Items.Add(<inner_component>) acts by setting up the outer component settings, as if adding the inner components to the webforms ASPX file. It works fine if done during Page_Load() or other event that renders the initial page displayed.

As for the <inner_component>.AddTo(<outer_component>), it instantiates the inner component and calls upon it its AddTo() method to add it somewhere else. So the result is not a component initial config, but a component call script that is returned to the browser to be run!..

This is also the reason you (rightfully) thought about re-running the component Render() method, which is essentially rebuilding the whole component, something that may not just work in every situation, and is more cumbersome. Of course there would be a way to make the render method work, but I just thought you'd prefer the simpler & faster approach of making the components and telling them to go inside the panel.

Hope this helps!

opendat2000
Sep 20, 2016, 9:56 PM
Hello Fabrício.

Thanks a lot for your reply, the code line you proposed worked perfectly.

Please close the thread.

Saludos
Mauricio.

fabricio.murta
Sep 20, 2016, 11:20 PM
Glad it works for you! Thanks for the feedback!