[CLOSED] Layout in ext.net drives me mad - "Stretch" a TabPanel/Panel and its contents fails if within a UserControl?

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Layout in ext.net drives me mad - "Stretch" a TabPanel/Panel and its contents fails if within a UserControl?

    The thing that takes the most time for me in ext.net is without a question layout:ing. I never seem to get it right, and I end up with endless of "trial-and-error" to get it right, and usually I end up here to ask for help cause I dont get it right.

    This time I have this scenario:

    1 <ext:Window> that contains a <ext:TabPanel>. That TabPanel has two <ext:Panel> where the first contains a PropertyGrid and the second a UserControl (that really is just GridPanel).

    The problem is with the UserControl in the second Panel, the GridPanel (in the UserControl) does NOT "strech" all the way out. However, if I remove the UserControl and place the GridPanel directly in the second Panel - it streches and resizes as expected.

    Why does the usages of a UserControl mess it all up?


    This is how it looks with the UserControl:
    Click image for larger version. 

Name:	delme.png 
Views:	188 
Size:	43.6 KB 
ID:	2726

    This is the code WITHOUT the UserControl:

    <%@ Page Language="C#" %>
     <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        
    </script>
           
    <!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 id="Head1" runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
                  
            <ext:Window runat="server" ID="WindowDetails" Title="test" Width="550" Height="500" Hidden="false">
        <Items>
            <ext:TabPanel ID="TabPanel1" runat="server" AutoHeight="true" AutoWidth="true" Border="true">
                <Items>
                    <ext:Panel runat="server" ID="tabPage1" Title="test1" AutoHeight="true" Layout="FitLayout" Border="true" MonitorResize="true">
                        <Items>
                            <ext:PropertyGrid runat="server" ID="PropertyGrid1" AutoHeight="true">
                                <View>
                                    <ext:GridView ID="GridView2" runat="server" ScrollOffset="0" ForceFit="true">
                                    </ext:GridView>
                                </View>
                                <Listeners>
                                    <Render Handler="this.getStore().sortInfo = undefined;" />
                                </Listeners>
                            </ext:PropertyGrid>
                        </Items>
                    </ext:Panel>
                    <ext:Panel runat="server" ID="tabPage2" Title="test2" AutoHeight="true" Layout="FitLayout" Border="true" MonitorResize="true">
                        <Content>
     
    <!-- USERCONTROL CONTENT. THIS IS EXACTLY WHAT WAS INSIDE THE USERCONTROL CALLED "EventLog" -->
    <ext:GridPanel ID="GridPanelEventLog" runat="server" AutoHeight="true" AutoWidth="true" StripeRows="true" Border="true" AutoExpandColumn="EventString" MonitorResize="true">
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                     
                    <ext:DateField runat="server" ID="dateFieldStart"></ext:DateField>
                    <ext:DateField runat="server" ID="dateFieldEnd"></ext:DateField>
                    <ext:Button runat="server" ID="btnRefresh"></ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Store>
            <ext:Store ID="StoreEventLog" runat="server" IDMode="Explicit">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="EventLogId" />
                            <ext:RecordField Name="Timestamp" Type="Date" />
                            <ext:RecordField Name="TriggerId" />
                            <ext:RecordField Name="TriggerName" />
                            <ext:RecordField Name="EventType" />
                            <ext:RecordField Name="EventString" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        
        <ColumnModel ID="ColumnModelContactItems" runat="server">
            <Columns> 
                <ext:Column DataIndex="EventLogId" Header="ID" Width="50" Hidden="true"/> 
                <ext:DateColumn DataIndex="Timestamp" Header="Tid" Format="yyyy-MM-dd HH:mm" Width="100"/>
                <ext:Column DataIndex="TriggerName" Header="Aktör"/>
                <ext:Column DataIndex="EventType" Header="Typ"/>
                <ext:Column DataIndex="EventString" Header="Info"/>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
     
    <!-- END USERCONTROL CONTENT -->
    
                        </Content>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Window>
        </form>
    </body>
    </html>
    The UserControl:
    Last edited by geoffrey.mcgill; May 18, 2011 at 5:18 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Actually, the toolbar should not be stretched, because it's out of any layout. Please note that sometimes things can be rendered correctly even if they are configured wrong:)

    Please wrap the user control's GridPanel in <ext:ContainerLayout>.

    Example
    <ext:ContainerLayout runat="server">
        <Items>
            <ext:GridPanel ...>
                ...
            </ext:GridPanel>
        </Items>
    </ext:ContainerLayout>
    Another issues.

    Please note that AutoHeight="true" and Layout="FitLayout" are incompatible things. Or AutoHeight="true", or Layout="FitLayout", not both at one moment.

    Also Layout="any layout" doesn't make sense in a context of <Content>.
  3. #3
    Quote Originally Posted by Daniil View Post
    Actually, the toolbar should not be stretched, because it's out of any layout. Please note that sometimes things can be rendered correctly even if they are configured wrong:)
    I have many other places where the TopBar resizes and stretches to the full width of its container (even though its a bit buggy). I have emailed you a link to a video to show that behaviour (for your eyes only). In this video you can see a few different ToolBars (TopBar, BottomBar). Some of them resizes, some dont, and all of them are a bit buggy. I hope the video will show the problem.


    Quote Originally Posted by Daniil View Post
    Please wrap the user control's GridPanel in <ext:ContainerLayout>.
    Done, Im not sure it helped. The Control does not resize when I resize my window...

    Quote Originally Posted by Daniil View Post
    Please note that AutoHeight="true" and Layout="FitLayout" are incompatible things. Or AutoHeight="true", or Layout="FitLayout", not both at one moment.
    Also Layout="any layout" doesn't make sense in a context of <Content>.
    Its messy to keep track of what to use where. A bunch of different examples of Layouting in examples site would be appreciated. I cannot really get it to work as I want it in many cases...
  4. #4
    Hi,

    I tried your sample and it appears to render correctly if you wrap the GridPanel in an <ext:ContainerLayout> and remove some of the other unnecessary properties.

    Layout="FitLayout" - not required on the parent Panel of the UserControl.
    MonitorResize="true" - not required on anything. Remove all instances of this property.
    AutoHeight="true" - Generally not required, especially if Parent container has a .Layout set.
    AutoWidth="true" - I don't think this is ever required. You should be able to remove all instances of this property.

    Here's your sample with new <ext:ContainerLayout> and properties cleaned up.

    Example (.aspx)

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <%@ Register src="Child.ascx" tagname="Child" tagprefix="uc1" %>
      
    <!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 id="Head1" runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
                   
            <ext:Window runat="server" Title="Example" Width="550" Height="500">
                <Items>
                    <ext:TabPanel runat="server" Border="true">
                        <Items>
                            <ext:Panel runat="server" Title="Tab 1" Layout="FitLayout" Border="true">
                                <Items>
                                    <ext:PropertyGrid runat="server">
                                        <View>
                                            <ext:GridView runat="server" ScrollOffset="0" ForceFit="true" />
                                        </View>
                                        <Listeners>
                                            <Render Handler="this.getStore().sortInfo = undefined;" />
                                        </Listeners>
                                    </ext:PropertyGrid>
                                </Items>
                            </ext:Panel>
                            <ext:Panel runat="server" Title="Tab 2" Border="true">
                                <Content>
                                    <uc1:Child ID="Child1" runat="server" />
                                </Content>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    Example (.ascx)

    <%@ Control Language="C#" ClassName="MyUserControl" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!-- USERCONTROL CONTENT. THIS IS EXACTLY WHAT WAS INSIDE THE USERCONTROL CALLED "EventLog" -->
    <ext:ContainerLayout runat="server">
        <Items>
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StripeRows="true" 
                Border="true" 
                AutoExpandColumn="EventString">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:DateField runat="server" />
                            <ext:DateField runat="server" />
                            <ext:Button runat="server" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="EventLogId" />
                                    <ext:RecordField Name="Timestamp" Type="Date" />
                                    <ext:RecordField Name="TriggerId" />
                                    <ext:RecordField Name="TriggerName" />
                                    <ext:RecordField Name="EventType" />
                                    <ext:RecordField Name="EventString" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns> 
                        <ext:Column DataIndex="EventLogId" Header="ID" Width="50" Hidden="true" /> 
                        <ext:DateColumn DataIndex="Timestamp" Header="Tid" Format="yyyy-MM-dd HH:mm" Width="100" />
                        <ext:Column DataIndex="TriggerName" Header="Aktör" />
                        <ext:Column DataIndex="EventType" Header="Typ" />
                        <ext:Column DataIndex="EventString" Header="Info" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </Items>
    </ext:ContainerLayout>
    
    <!-- END USERCONTROL CONTENT -->
    Hope this helps.
    Geoffrey McGill
    Founder
  5. #5
    Thanks Geoffrey.

    I will take a look at it soon. However, the AutoHeight and AutoWidth is usually very necessary on GridPanels. If I do not use those properties on GridPanels, they usually end up being one row in height, instead of expanding down as you normally want them to...
  6. #6
    Geoffrey, the GridPanel does not resize itself when I resize the Window (compare with how the PropertyGrid behaves, much better)

    How can that be achieved?
  7. #7
    Quote Originally Posted by wagger View Post
    Thanks Geoffrey.

    I will take a look at it soon. However, the AutoHeight and AutoWidth is usually very necessary on GridPanels. If I do not use those properties on GridPanels, they usually end up being one row in height, instead of expanding down as you normally want them to...
    Officially, the GridPanel requires either the .Height to be set, or the GridPanel must be controlled by a Parent Container with a .Layout set.

    Its possible the .AutoHeight property may work in some scenarios, but as a general rule should not be used. Set the .height, or use a Layout to control its sizing, such as FitLayout.

    The .AutoWidth property is ignored by GridPanel, and I think all Container type components. Except maybe <ext:Window>, but I would have to confirm.
    Geoffrey McGill
    Founder
  8. #8
    Quote Originally Posted by wagger View Post
    Geoffrey, the GridPanel does not resize itself when I resize the Window (compare with how the PropertyGrid behaves, much better)

    How can that be achieved?
    I'll take a closer look at this, although the sizing PropertyGrid is controlled by a FitLayout, and the GridPanel is controlled by a ContainerLayout. They will/may have different resizing results.

    The ContainerLayout is basically "no layout". The child components are still added to the .Items Collections, but their Layouts are not really managed. Using a FitLayout will cause the Parent to take a much more active role in (re)laying-out its children.

    Changing the <ext:ContainerLayout> to an <ext:FitLayout> should solve the resizing issue.

    I'll investigate using the <ext:ContainerLayout> further. Might have to call .syncSize() on the GridPanel when the Window is resized.
    Geoffrey McGill
    Founder
  9. #9
    I see.

    However, setting .Height doesnt cut it for me in most cases. I want to avoid fixed sizes and instead have the container adapt to its parent containers.

    The problem with FitLayout is that only one Control can be contained in that and secondly, that container who has Layout="FitLayout" must also have a width/height specifified. I cannot use FitLayout all the time, somewhere I need like "expand as you wish" or something... hmm.

    In this case, should I instead of wrapping with a ContainerLayout wrap with something else so that the GridPanel can expand and shrink as necessary?

    == EDIT ==

    I tried to replace the ext:ContainerLayout with <ext:FitLayout ...> in the Child.ascx and that worked a lot better. Now the GridPanel streches, resizes and all that stuff.


    <%@ Control Language="C#" ClassName="Child" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
    <!-- USERCONTROL CONTENT. THIS IS EXACTLY WHAT WAS INSIDE THE USERCONTROL CALLED "EventLog" -->
    <ext:FitLayout ID="ContainerLayout1" runat="server" >
        <Items>
            <ext:GridPanel MonitorResize="true"
                ID="GridPanel1"
                runat="server"
                StripeRows="true"
                Border="true"
                AutoExpandColumn="EventString">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:DateField ID="DateField1" runat="server" />
                            <ext:DateField ID="DateField2" runat="server" />
                            <ext:Button ID="Button1" runat="server" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="EventLogId" />
                                    <ext:RecordField Name="Timestamp" Type="Date" />
                                    <ext:RecordField Name="TriggerId" />
                                    <ext:RecordField Name="TriggerName" />
                                    <ext:RecordField Name="EventType" />
                                    <ext:RecordField Name="EventString" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns> 
                        <ext:Column DataIndex="EventLogId" Header="ID" Width="50" Hidden="true" /> 
                        <ext:DateColumn DataIndex="Timestamp" Header="Tid" Format="yyyy-MM-dd HH:mm" Width="100" />
                        <ext:Column DataIndex="TriggerName" Header="Aktör" />
                        <ext:Column DataIndex="EventType" Header="Typ" />
                        <ext:Column DataIndex="EventString" Header="Info" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </Items>
    </ext:FitLayout>
  10. #10
    Sure, <ext:FitLayout> is much better for your requirements.

    But when I suggested <ext:ContainerLayout> I thought you need auto height - I understood that from your initial sample.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] How does "MaskCls" work for "AutoLoad" mask in panel control
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 19, 2012, 12:09 PM
  2. Replies: 1
    Last Post: Jun 26, 2012, 11:29 AM
  3. Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  4. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM
  5. Replies: 2
    Last Post: Jun 26, 2011, 1:59 AM

Tags for this Thread

Posting Permissions