[CLOSED] ColumnLayout - not setting width before content

[craig2005]

Uh... sooo sorry. Missed that.

So a few quick questions.

When should i be using RenderMode.AddTo? Is that the cause for all my height problems?

Do i use "pr.ControlToRender" when i'm rendering more than one control? And then use pr.SingleControl when it's only one control?

This is all very good stuff to know :-) Every time i tried to use the RenderMode.AddTo it would blowout on me. I see now that's because i was missing the pr.ControlToRender.

[craig2005]

Also, what if everything isn't wrapped in one control?

For example...

<ext:store>...
</ext:store>..

<ext:gridpanel>...

</ext:gridpanel>..

<ext:window>..
</ext:window>

[craig2005]

When i render the homeTab on my project with the RenderMode.AddTo set, I get this error. What does it mean? Why would i get it? I only get it when i have RenderMode set to AddTo.

ReferenceError: ext is not defined

[Vladimir]

Hi,

First, please read the following post to undestand the difference between Content and Items
http://forums.ext.net/showthread.php...ll=1#post36120

When should i be using RenderMode.AddTo?

If you use AddTo mode then control will be added to Items collection of a container. It means that the control will participate in layout logic (sizing and position). if you did not set SingleControl or ControlToRender properties then a panel will be created and view will be placed to Content of that panel (it is required because AddTo mode can work with one control only).

RenderTo mode renders view to passed DOM element. In this case, view's controls will not participate in the layout logic and container will not be able to change size of those controls

Do i use "pr.ControlToRender" when i'm rendering more than one control? And then use pr.SingleControl when it's only one control?

Those properties need to use if you need to omit creating of interim panel (i recommend to use those properties if you use AddTo mode and you have single top level control in the view). ControlToRender property accepts ID of control, SingleControl is bool property (useful if you don't ID of single top level control)

Also, what if everything isn't wrapped in one control?

In this case, interim panel will be created and view will be added to panel's content area, you can force Items using instead content if wrap view by layout control (please note that wrapping by layout control is possible for components only, for example, store cannot be added to Items)

[craig2005]

If i don't say controlToRender it breaks. I believe it broke in the example as well if I didn't use that.

AddTo doesn't work for me. I get errors and it seems like it doesn't work well for pages that use a store and don't have a top level hierarchy.

So back to the orignal question then, how do I get the heights to set dynamically. My frustration level with doing the simplest thing in HTML vs EXT.net is getting really high.

I even commented out almost my entire HomeTab.ascx view and I still get the "ext is not defined" error message.

[Vladimir]

Hi,

You can move the store inside widget (grid, combo and etc)
AddTo mode can work with single component only because layout doesn't accept none components

AddTo doesn't work for me. I get errors and it seems like it doesn't work well for pages that use a store and don't have a top level hierarchy.

Please show your view, controller and how do you initiate request (i need to know what container id do you pass), your posted sample doesn't reproduce the problem

[geoffrey.mcgill]

So back to the orignal question then, how do I get the heights to set dynamically. My frustration level with doing the simplest thing in HTML vs EXT.net is getting really high.

You see the thing here is that we don't understand exactly how you currently have your components configured. We're stabbing in the dark trying to offer up suggestions because you are not posting the current state of your code samples.

The quickest way to get your problem solved will be to create a "simplified" code sample demonstrating how you have your components configured.

If you post a code sample, then change something, then ask why something else is not working as you would expect, you must post another code sample. We can only guess what might have changed, and unfortunately it's never enough to just "describe" the problem.

[craig2005]

ExtGroup.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ExtSite.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	ExtGroup
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <ext:Panel ID="GroupPageWrapper" runat="server" Width="900" Border="false">
            <Items>
                <ext:TabPanel Plain="true" ID="tpGroupTabs" runat="server" ActiveTabIndex="0" Padding="20" TabWidth="200" Border="false" MinHeight="400">
                    <Items>
                         <ext:Panel ID="homeTab" runat="server"  Title="Home" Layout="fit" Height="600">
                            <AutoLoad Url="/Group/HomeTab" NoCache="true" ShowMask="true" MaskMsg="Loading home content...">
                                <Params>
                                    <ext:Parameter Name="containerId" Value="function () { return #{homeTab}.body.id; }" Mode="Raw" />
                                </Params>
                            </AutoLoad>
                        </ext:Panel>
                        <ext:Panel ID="calendarTab" runat="server" Closable="false" Title="Calendar" Height="500" Layout="fit">
                            <AutoLoad Url="/Group/CalendarTab" NoCache="true" ShowMask="true" MaskMsg="Loading group calendar...">
                                <Params>
                                    <ext:Parameter Name="containerId" Value="function () { return #{calendarTab}.body.id; }" Mode="Raw" />
                                </Params>
                            </AutoLoad>
                        </ext:Panel>
                   <Items>
                </ext:TabPanel>
            </Items>
        </ext:Panel>
</asp:Content>

HomeTab.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Panel ID="homeTabLayoutWrapper" runat="server" Border="false" Layout="hbox">
    <LayoutConfig>
        <ext:HBoxLayoutConfig Align="Stretch" />
    </LayoutConfig>
    <Items>
        <ext:Panel ID="Panel3" runat="server" Width="400" Layout="fit" Border="false">
            <Items>
                <ext:Panel ID="accEventsWrapper" runat="server" AutoHeight="true" Border="false">
                    <Items>
                        <ext:AccordionLayout ID="accEvents" runat="server" Animate="true">
                            <Items>
                                <ext:Panel ID="accEventsPanel" runat="server" Border="false" AutoHeight="true" Layout="fit" Title="Events"  Collapsed="false" Padding="10" />
                            </Items>
                        </ext:AccordionLayout>
                    </Items>
                </ext:Panel>
                <ext:Panel ID="accPhotosWrapper" runat="server" AutoHeight="true" Border="false">
                    <Items>
                        <ext:AccordionLayout ID="accPhotos" runat="server" Animate="true">
                            <Items>
                                <ext:Panel ID="accPhotosPanel" runat="server" Border="false" AutoHeight="true" Layout="fit" Title="Photos"  Collapsed="false" Padding="10" />
                            </Items>
                        </ext:AccordionLayout>
                    </Items>
                </ext:Panel>  
            </Items>
        </ext:Panel>
    </Items>
</ext:Panel>

Controller

public ActionResult HomeTab(string containerId)
        {
            Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerId, Ext.Net.RenderMode.AddTo);
            pr.ControlToRender = "homeTabLayoutWrapper";
            return pr;
        }

Site Master

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<%@ 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><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <asp:ContentPlaceHolder ID="TopHeader" runat="server" />

    <ext:ResourcePlaceHolder runat="server" Mode="Style" />
    <ext:ResourcePlaceHolder runat="server" Mode="Script" />

    <asp:ContentPlaceHolder ID="BottomHeader" runat="server" />
</head>
<body>
 <ext:ResourceManager ID="ResourceManager1" 
            runat="server" 
            ScriptMode="Debug"
            IDMode="Explicit" 
            />
     <asp:ContentPlaceHolder ID="TopOfBody" runat="server" />
                    <div id="MainContentWrapper">
                            <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
                    </div>
    </body>
</html>

[Vladimir]

Hi,

The problem that you pass incorrect container id, you pass body id but you have to pass container id, it is required if you use AddTo mode (in your posted project you use container id therefore i am not sure why do you changed it to body id)

<ext:Parameter Name="containerId" Value="#{homeTab}" Mode="Value" />

[craig2005]

Geez... it had to be something silly.

They were two different code samples. When i implemented the example into my code, i didn't look at that. I just assumed it always wanted the container's body id.

So the lesson learned here is using the RenderMode.AddTo will allow it's container to factor in the height of the content being loaded. That is really important. So it wasn't the layout container as much as it was the RenderTo that was causing the issues.

Good lesson. Thanks!

Did i miss anything?