[CLOSED] Rendering a ViewPort with south region collapsed

[RCN]

Hi folks, some months ago i reported an issue regarding the ViewPort's rendering: http://forums.ext.net/showthread.php...s-not-rendered

It was resolved by ExtJs team, but after implementing another functionality - http://forums.ext.net/showthread.php...anel-s-content - the error comes alive again.

The following example just runs if the Collapsed property of _pnlSouth - line 26- is set to false. Going further, it's possible to collapse the _pnlSouth after 1 second, which demonstrates that the problem came back again. To collapse the panel, please do the following on line 34:

pnlSouth.Listeners.AfterRender.Delay = 1000;
pnlSouth.Listeners.AfterRender.Handler = "App._pnlSouth.collapse();";

1 - View

<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="_wmp" Layout="BorderLayout" Border="false" runat="server">
    <Loader ID="Loader1" Url="/Example/FuncAbc/" Mode="Component" AutoLoad="true" runat="server">
        <LoadMask ShowMask="true" />
    </Loader>
</ext:Viewport>

2 - Action

public ContentResult FuncAbc()
{
    ContentResult result = new ContentResult();

    IList<AbstractComponent> lstRegions = new List<AbstractComponent>();

    Panel pnlCenter = new Panel
    {
        Title = "Center Region",
        Icon = Icon.Application,
        Html = "Content",
        Border = false,
        Collapsible = false,
        Split = true,
        Region = Region.Center
    };
    lstRegions.Add(pnlCenter);

    Panel pnlSouth = new Panel
    {
        ID = "_pnlSouth",
        Title = "South Region",
        Icon = Icon.Application,
        Html = "Content",
        Border = false,
        Collapsed = true,
        Collapsible = true,
        Split = true,
        Region = Region.South,
        TitleCollapse = true,
        Floatable = false,
        Height = 300,
    };

    lstRegions.Add(pnlSouth);

    result.Content = ComponentLoader.ToConfig(lstRegions);

    return result;
}

Any ideas to overcome this issue?

Thanks in advance

[Daniil]

Hi Raphael,

When I said

Setting up a Viewport with BorderLayout on the page and loading its regions via Loader is a common and good practice.

I meant this:

Example

<ext:Viewport runat="server" Layout="BorderLayout">
    <Items>
        <ext:Panel Region="Center">
            <Loader ... />
        </ext:Panel>
        <ext:Panel Region="South">
            <Loader ... />
        </ext:Panel>
    </Items>
</ext:Viewport>

According to Ext.JS docs:

Any Container using the Border layout must have a child item with region:'center'.

http://docs.sencha.com/ext-js/4-1/#!...ntainer.Border

In your case you can just set FitLayout for the Viewport and load a container with BorderLayout.

Please report if the issue with Collapsed will be still reproducible.

[RCN]

The following approach is not suitable for me because it will increase the number of calls to the server, which will reduce the scalability of my application.

<ext:Viewport runat="server" Layout="BorderLayout">
    <Items>
        <ext:Panel Region="Center">
            <Loader ... />
        </ext:Panel>
        <ext:Panel Region="South">
            <Loader ... />
        </ext:Panel>
    </Items>
</ext:Viewport>

Do you agree with the following approach?

In your case you can just set FitLayout for the Viewport and load a container with BorderLayout.

1 - View

<ext:Viewport ID="_wmp" Layout="FitLayout" runat="server">
    <Loader ID="Loader1" Url="/Example/FuncAbc/" Mode="Component" AutoLoad="true" runat="server">
        <LoadMask ShowMask="true" />
    </Loader>
</ext:Viewport>

2 - Action

 public ContentResult FuncAbc()
{
    ContentResult result = new ContentResult();

    Panel pnl = new Panel { Layout = "BorderLayout" };

    Panel pnlCenter = new Panel
    {
        Title = "Center Region",
        Icon = Icon.Application,
        Html = "Content",
        Border = false,
        Collapsible = false,
        Split = true,
        Region = Region.Center
    };
    pnl.Items.Add(pnlCenter);

    Panel pnlSouth = new Panel
    {
        ID = "_pnlSouth",
        Title = "South Region",
        Icon = Icon.Application,
        Html = "Content",
        Border = false,
        Collapsed = true,
        Collapsible = true,
        Split = true,
        Region = Region.South,
        TitleCollapse = true,
        Floatable = false,
        Height = 300,
    };

    pnl.Items.Add(pnlSouth);

    result.Content = ComponentLoader.ToConfig(pnl);

    return result;
}

p.s: I would like to know whether i can update the closed task http://forums.ext.net/showthread.php...anel-s-content to reflect these changes

[Daniil]

Yes, your solution is good.

p.s: I would like to know whether i can update the closed task http://forums.ext.net/showthread.php...anel-s-content to reflect these changes

Yes, please always feel free to update any closed thread with any info related to the topic.

[RCN]

Thank you Daniil, please mark this thread as closed