[CLOSED] Restricion in nesting Ext.Net.Controls?

[ViDom]

Thanks Daniil:)

I'll test it tommorow and let you know about the efect :)

Why you added userControl to ContentControls ?

Is there any different between ContentControls and Controls?

[Daniil]

The ContentControls represents the markup Container <Content> thing. That property appeared in Ext.NET to contain and render non Ext.NET controls placing them into an Ext.NET container.

The control is a native ASP.NET property.

[ViDom]

The ContentControls represents the markup Container <Content> thing. That property appeared in Ext.NET to contain and render non Ext.NET controls placing them into an Ext.NET container.

The control is a native ASP.NET property.

Good to know that :)

But your example is not working as it should:(

Screen with how It display now


and here my files:

master.page as yours

page.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Page.Master" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<script runat="server">

       private UserControl ser;

        protected UserControl Control
        {
            get
            {
                return ViewState["SpecialControl" + ser.ClientID] != null
                           ? (UserControl) ViewState["SpecialControl" + ser.ClientID]
                           : ser != null ? ser : null;
            }
            set { ViewState["SpecialControl" + ser.ClientID] = value; }
        }

        protected void Page_PreInit(object sender, EventArgs e)
        {
            ser = (UserControl)LoadControl("~/controls/Details/SpecialControlContainer.ascx");
           ser.ID= "detail";
            Control = ser;
        }

        protected void Page_Init(object sender,EventArgs e)
        {
                if(Control != null)
                    ctrContent.ContentControls.Add(Control);
         }
</script>

<asp:Content ID="contentContainer" ContentPlaceHolderID="siteContent" runat="server">
    <ext:Container runat="server" ID="ctrContent"></ext:Container>
</asp:Content>

SpecialControlContainer.ascx

<%@ Control Language="C#"%>
<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net, Version=1.5.0.0, Culture=neutral, PublicKeyToken=2e12ce3d0176cd87" %>

<script runat="server" >
            protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
           
           TestUC dictionaryFormMmp = (TestUC)LoadControl("~/controls/TestUC.ascx");                    
            ctrUserControl.ContentControls.Add(dictionaryFormMmp);
        }
</script>

<ext:VBoxLayout runat="server" Align="Stretch">
    <BoxItems>
        <ext:BoxItem Flex="0">
            <ext:Panel ID="pnControls" runat="server" Height="31">
            <Items>
            <ext:Button runat="server" ID="btnAddNotification"  IconAlign="Left" Text="some button in markup" Icon="ErrorAdd" Cls="topButton" OnDirectClick="btnAddNotification_OnDirectClick" />
            </Items>
        </ext:Panel>
        </ext:BoxItem>
        <ext:BoxItem Flex="1">
            <ext:Panel ID="ctrUserControl" runat="server" />
        </ext:BoxItem>
    </BoxItems>
</ext:VBoxLayout>

TestUC.ascx

<%@ Control Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
      protected override void OnInit(EventArgs e)
      {
            
      }
</script>

<ext:BorderLayout ID="BorderLayout1" runat="server">
    <North>
        <ext:Panel ID="Panel1" runat="server">
            <Content>
                <center>
                <div class="ctrl_box DictionaryForm">
                    <asp:Panel runat="server" ID="pnCustomButtons"></asp:Panel>
                    <asp:Panel runat="server" ID="panelButtons" CssClass="panel_buttons panel_buttons_div"
                        meta:resourcekey="panelButtonsResource1">
                        <asp:Button ID="btnReturn" Text="Return" runat="server" OnClick="btnReturn_Click"
                            CssClass="button" meta:resourcekey="btnReturnResource1" />                        
                    </asp:Panel>
                    <asp:Panel runat="server" ID="panelPrintOptions" Visible="False" meta:resourcekey="panelPrintOptionsResource1">
                         <asp:Button ID="btnExecute" Text="Execute" runat="server" CssClass="button" />
                    </asp:Panel>                    
                </div>
                </center>
            </Content>
              
            
        </ext:Panel>
        
    </North>
    <Center>
        <ext:Panel ID="panelCenter" runat="server" Region="Center" AutoScroll="True">
            <Content>
                <center>                   
                   
                </center>
            </Content>
        </ext:Panel>
    </Center>
    <South MaxHeight="300" MinHeight="200" Collapsible="true"  >
        <ext:TabPanel ID="tPanel" AutoHeight="True" runat="server" Border="false" Collapsed="True"
            Collapsible="True">
            <Items>
                   <ext:Panel runat="server" ID="pnTab" Title="First Tab"/>
             </Items>    
        </ext:TabPanel>
    </South>
</ext:BorderLayout>

Am I doing something wrong?

[Daniil]

But your example is not working as it should:(

Please clarify did you try exactly my example? It appears to be working correctly and meets the mockup you have provided.

Regarding your samples.

The North and South region requires explicit Height.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.layout.BorderLayout

Another issue is here:

<asp:Content ID="contentContainer" ContentPlaceHolderID="siteContent" runat="server">
    <ext:Container runat="server" ID="ctrContent"></ext:Container>
</asp:Content>

The Container is not under any layout control. I would wrap in a FitLayout.

<asp:Content ID="contentContainer" ContentPlaceHolderID="siteContent" runat="server">
    <ext:FitLayout runat="server">
        <Items>
            <ext:Container runat="server" ID="ctrContent"></ext:Container>
        </Items>
    </ext:FitLayout>
</asp:Content>

[ViDom]

Please clarify did you try exactly my example? It appears to be working correctly and meets the mockup you have provided.

Regarding your samples.

The North and South region requires explicit Height.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.layout.BorderLayout

Another issue is here:

<asp:Content ID="contentContainer" ContentPlaceHolderID="siteContent" runat="server">
    <ext:Container runat="server" ID="ctrContent"></ext:Container>
</asp:Content>

The Container is not under any layout control. I would wrap in a FitLayout.

<asp:Content ID="contentContainer" ContentPlaceHolderID="siteContent" runat="server">
    <ext:FitLayout runat="server">
        <Items>
            <ext:Container runat="server" ID="ctrContent"></ext:Container>
        </Items>
    </ext:FitLayout>
</asp:Content>

Yes Daniil I did try exacly yours example and effect was that you can see at attached image in last my post. 1 more thing came up when I don't add buttons in SpecialControlContainer.ascx then it's showing wrong but showing something when I add this buttons (from markup or codebehind doesn't matter) I can see only white page whitout anything at all:(

[Daniil]

Yes Daniil I did try exacly yours example and effect was that you can see at attached image in last my post.(

Can you confirm my example works on your side without any changes?

I can see only white page whitout anything at all:(

Unfortunately, I can't reproduce that using your code. You have not provide a Master Page. When I use my master page I am getting various exceptions.

Please take my example as a base. When modify it following your needs step by step, checking each step how it looks in a browser. When you will get some undesired result, please post the code.

[ViDom]

Can you confirm my example works on your side without any changes?



Unfortunately, I can't reproduce that using your code. You have not provide a Master Page. When I use my master page I am getting various exceptions.

Please take my example as a base. When modify it following your needs step by step, checking each step how it looks in a browser. When you will get some undesired result, please post the code.

Your example doesn't work on my side without changes :(

Edit:

I checked again and it's works without changes but it's seems to crash when I try to dynamically load this UserControlContainer of my.
How would I do that? I have only 1 *.aspx page and about 20 userControls load to it.

[Daniil]

Ok, good that my example works on your side.

To help you I have to know what exactly changes you have applied. Please demonstrate.

[ViDom]

Ok, good that my example works on your side.

To help you I have to know what exactly changes you have applied. Please demonstrate.

master.page

<%@  Master Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!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>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel
                    runat="server"
                    Region="North"
                    Title="Master North"
                    Height="200" />
                <ext:Panel runat="server" Region="Center" Title="Master Center">
                    <Content>
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
                    </Content>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

User Control 1

<%@ Control Language="C#"%>
   
<%@ Register TagPrefix="ext" Namespace="Ext.Net" %>
 
<script runat="server">
    protected void Page_Init(object sender, EventArgs e)
    {
        this.Panel1.Items.Add(new Ext.Net.Button()
            {
                Text = "Added from the code behind"
            });
 
        Control uc = this.LoadControl("TestUC2.ascx");
        this.Panel2.ContentControls.Add(uc);
    }
</script>
  
<ext:VBoxLayout runat="server" Align="Stretch">
    <BoxItems>
        <ext:BoxItem>
            <ext:Panel
                ID="Panel1"
                runat="server"
                Title="Buttons"
                Height="100">
                <Items>
                    <ext:Button runat="server" Text="Defined in the markup" />
                </Items>
            </ext:Panel>
        </ext:BoxItem>
        <ext:BoxItem Flex="1">
            <ext:Panel ID="Panel2" runat="server" Title="Content" />
        </ext:BoxItem>
    </BoxItems>
</ext:VBoxLayout>

Second User Control

<%@ Control Language="C#"%>
   
<%@ Register TagPrefix="ext" Namespace="Ext.Net" %>
  
<ext:BorderLayout runat="server">
    <North>
        <ext:Panel runat="server" Title="Nested North" Height="100" />
    </North>
    <Center>
        <ext:Panel runat="server" Title="Nested Center" />
    </Center>
    <South Collapsible="true">
        <ext:TabPanel runat="server" Height="100">
            <Items>
                <ext:Panel runat="server" Title="Tab 1" />
                <ext:Panel runat="server" Title="Tab 2" />
            </Items>
        </ext:TabPanel>
    </South>
</ext:BorderLayout>

page.aspx <- here I made changed Loading control

<%@ Page Title="" Language="C#" MasterPageFile="~/Page.Master" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
        private UserControl ser;
        protected UserControl Control
        {
            get
            {
                return ViewState["SpecialControl" + ser.ClientID] != null
                           ? (UserControl) ViewState["SpecialControl" + ser.ClientID]
                           : ser != null ? ser : null;
            }
            set { ViewState["SpecialControl" + ser.ClientID] = value; }
        }

        protected void Page_PreInit(object sender, EventArgs e)
        {
            ser = (UserControl)LoadControl("~/TestUC.ascx");
            Control = ser;
        }

        protected void Page_Init(object sender,EventArgs e)
        {    
                if (Control != null)
                    ctrContent.ContentControls.Add(Control);             
         }
</script>
<asp:Content ID="contentContainer" ContentPlaceHolderID="siteContent" runat="server">
    <ext:FitLayout ID="FitLayout1" runat="server">
        <Items>
            <ext:Container runat="server" ID="ctrContent"></ext:Container>
        </Items>
    </ext:FitLayout>
</asp:Content>

Like you can see I changed only way to LoadControl from markup to codebehind.

Any ideas?

[Daniil]

Please always ensure the code that you post is runnable.

Regarding page.aspx: there is no "ser" and "MMPFramework" definition.

I had to add

private UserControl ser;

and remove

if (!string.IsNullOrEmpty(Page.Request[MMPFramework.LinkedProviderUrlStrings.ParentId]))
{
    this.MasterPageFile = "~/Empty.Master";
}

Also I have replaced

ser = (UserControl)LoadControl("~/controls/FirstUserControl.ascx");

with

ser = (UserControl)LoadControl("~/TestUC.ascx");

according the paths I have in my project.

Here is the resulting page I can see in the browser.


It looks correct and consistent.