[CLOSED] Height Issues when auto loading panels

[craig2005]

i've created a full demo as I've spent hours trying to accomplish this. When autoloading panels, i can't figure out how to have everything auto adjust to a specific height and width.

Using the card layout, when I switch the active, the card layout should automatically resize on the page. I'm going crazy trying to do this :-) It sounds simple and i'm sure i'm just missing something.

The flow is like this.

Home Page
   --> Buttons that change the card layout
   --> Tab Panel (this has a fixed height, and I want to remove that.  there should be no fixed heights.  i need a dynamic layout)
           --> Auto loading panel
                 --> hbox layout
                         --> date picker
                         --> card layout with 3 items
                                  --> calendar
                                  --> auto loading form panel 1
                                  --> auto loading form panel 2

Example attached.

[geoffrey.mcgill]

I'm not sure this is going to work in the way that you are expecting.

I'm pretty sure items loaded into a parent container using AutoLoad (non-iframe) do not participate in the Layout engine. More specifically, the Parent calculates it's layout, and the Child calculates it's layout, but they do not function as one unit, such as when a child is added directly to the parents .Items collection.

When using .AutoLoad (non-iframe mode) i'd stick to loading basic HTML/Text only. Loading other Components is going to give unexpected/frustrating results. It's just the nature of the feature.

[craig2005]

Can someone please look at it the example and give some suggestions? People auto load components all the time.

For example, why do the fieldsets in the event view and the event edit view not expand to the full length of the form panel? How can i force them to stretch. I see all the examples that you guys have and I'm just thinking that maybe i'm using the wrong layouts. I know different layouts have different strengths and weaknesses.

I had this almost working with column layout, but then thought the card layout was a better fit.

[craig2005]

And why doesn't minHeight work on a panel?

[Daniil]

Can someone please look at it the example and give some suggestions? People auto load components all the time.

For example, why do the fieldsets in the event view and the event edit view not expand to the full length of the form panel? How can i force them to stretch. I see all the examples that you guys have and I'm just thinking that maybe i'm using the wrong layouts. I know different layouts have different strengths and weaknesses.

I had this almost working with column layout, but then thought the card layout was a better fit.

Hi,

There are a lot of issues. Well, I corrected some of them. Please look at the result.

P.S. I would suggest you to consider the problems step-by-step. Problem with layout in FormPanel - start a new thread with a simplified sample, etc.

[Daniil]

And why doesn't minHeight work on a panel?

Well, it works fine but some of layout managers ignore that. So, we need a sample what you mean.

[craig2005]

Thanks for taking the time to do that. Your example is awesome!!!

[craig2005]

I have a question though. Why is the render mode "RenderTo" and not "AddTo". I've been told several times and seen in examples to use the "AddTo"

[Daniil]

I have a question though. Why is the render mode "RenderTo" and not "AddTo". I've been told several times and seen in examples to use the "AddTo"

Yes, you are right, it would be more proper to use .AddTo() for the .ascx there a single top control.

So, please use

public ActionResult ViewEvent(string containerId)
{
    Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerId, Ext.Net.RenderMode.AddTo);
    pr.SingleControl = true;
    return pr;
}

public ActionResult EditEvent(string containerId)
{
    Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerId, Ext.Net.RenderMode.AddTo);
    pr.SingleControl = true;
    return pr;
}

Well, it works also with .RenderTo because it doesn't matter parent's layout would manage loaded content or not, because we use AutoHeight="true".

<ext:Panel 
    runat="server" 
    ID="plnCalendarEditEvent" 
    Border="false" 
    AutoHeight="true">
    <AutoLoad Url="/Home/EditEvent" NoCache="true" ShowMask="true">
        <Params>
            <ext:Parameter 
                Name="containerId" 
                Value="function () { return #{plnCalendarEditEvent}.id; }"
                Mode="Raw" />
        </Params>
    </AutoLoad>
</ext:Panel>

We can't use .AddTo for HomeTab because there are three top controls. So, I use .RenderTo. But, it would be more proper to render the content to the body when .RenderTo is used.

So, please replace

return #{Calendar}.id;

with

return #{Calendar}.body.id

in

<ext:Panel
    ID="Calendar"
    runat="server"
    Title="Home"
    AutoHeight="true">
    <AutoLoad Url="/Home/HomeTab" NoCache="true" ShowMask="true">
        <Params>
            <ext:Parameter
                Name="containerId"
                Value="function () { 
                    return #{Calendar}.body.id; 
                }"
                Mode="Raw" />
        </Params>
    </AutoLoad>
</ext:Panel>

[craig2005]

great, you answered my next question of why you were not using #{container}.body.id

thanks for the explanation!!!