PDA

View Full Version : [CLOSED] Rendering a ViewPort with south region collapsed



RCN
Oct 16, 2012, 8:58 PM
Hi folks, some months ago i reported an issue regarding the ViewPort's rendering: http://forums.ext.net/showthread.php?19373-CLOSED-Expand-a-region-with-components-not-rendered

It was resolved by ExtJs team, but after implementing another functionality - http://forums.ext.net/showthread.php?21472-Mask-position-when-loading-Panel-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
Oct 17, 2012, 10:11 AM
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/#!/api/Ext.layout.container.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
Oct 17, 2012, 12:11 PM
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?21472-Mask-position-when-loading-Panel-s-content to reflect these changes

Daniil
Oct 17, 2012, 1:11 PM
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?21472-Mask-position-when-loading-Panel-s-content to reflect these changes

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

RCN
Oct 17, 2012, 1:59 PM
Thank you Daniil, please mark this thread as closed