[CLOSED] IE6 - layout - Stuff flying arround

Page 3 of 4 FirstFirst 1234 LastLast
  1. #21
    By the way, my first sample also works fine if set fixed Width for container.

    Generally speaking, HBox works fine if fixed width or flex are specified for its items.

    Example
    <%@ Page Language="C#" %>
       
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
       
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" }
                };
            }
        }
    </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 runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:Container
                        runat="server"
                        AutoScroll="true"
                        Layout="hbox"
                        StyleSpec="position: relative;">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig Align="Middle" />
                        </LayoutConfig>
                        <Items>
                            <ext:Container runat="server" Flex="1" />
                            <ext:Container runat="server" Width="600">
                                <Items>
                                    <ext:CompositeField runat="server">
                                        <Items>
                                            <ext:DisplayField runat="server" Text="Test" />
                                        </Items>
                                    </ext:CompositeField>
                                    <ext:GridPanel
                                        ID="GridPanel1"
                                        runat="server"
                                        Title="Array Grid"
                                        Width="600"
                                        Height="200"
                                        AutoExpandColumn="company">
                                        <Store>
                                            <ext:Store ID="Store1" runat="server">
                                                <Reader>
                                                    <ext:ArrayReader>
                                                        <Fields>
                                                            <ext:RecordField Name="company" />
                                                            <ext:RecordField Name="price" Type="Float" />
                                                            <ext:RecordField Name="change" Type="Float" />
                                                            <ext:RecordField Name="pctChange" Type="Float" />
                                                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                                        </Fields>
                                                    </ext:ArrayReader>
                                                </Reader>
                                            </ext:Store>
                                        </Store>
                                        <ColumnModel runat="server">
                                            <Columns>
                                                <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                                                <ext:Column Header="Price" DataIndex="price">
                                                </ext:Column>
                                                <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                                                </ext:Column>
                                                <ext:Column Header="Change" DataIndex="pctChange">
                                                </ext:Column>
                                                <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                                            </Columns>
                                        </ColumnModel>
                                        <SelectionModel>
                                            <ext:RowSelectionModel runat="server" SingleSelect="true" />
                                        </SelectionModel>
                                    </ext:GridPanel>
                                    <ext:Container runat="server">
                                        <Content>
                                            <div style="height:1000px;width:185px;border:1px solid red;background-color:red;"></div>
                                        </Content>
                                    </ext:Container>
                                </Items>
                            </ext:Container>
                            <ext:Container runat="server" Flex="1" />
                        </Items>
                    </ext:Container>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
  2. #22
    Quote Originally Posted by SouthDeveloper View Post
    1. Center layout is not working;
    Yes, this layout manager is not so good and we are going to not include it in v2, as Geoffrey mentioned.

    So, please avoid to use it.

    Quote Originally Posted by SouthDeveloper View Post
    2. Column layout doesnt support nesting another column layout [see sample 0];
    Desired result:
    <html>
    <head>
        <style type="text/css">
            #main
            {
                width: 800px;
                margin: 0 auto;
            }
            #sidebar
            {
                width: 200px;
                height: 400px;
                background: red;
                float: left;
            }
            
            #page-wrap
            {
                width: 600px;
                background: #ffffff;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div id="sidebar">
                sidebar
            </div>
            <div id="page-wrap">
                pagewrap
            </div>
        </div>
    </body>
    </html>


    Sample 0:

    <ext:Panel runat="server" AutoHeight="true" Layout="Column">        
              <Items>
                <ext:Container runat="server" ColumnWidth="0.5" />
                <ext:Container runat="server" AutoHeight="true" Width="900">
                    <Items>
                        <ext:HyperLink Text="Top links" runat="server" />
                        <ext:Container Layout="ColumnLayout" runat="server">
                            <Items>
                                <ext:Container ColumnWidth="1" runat="server"> <%--main site--%>
                                    <Content>
                                        main
                                    </Content>
                                </ext:Container>
                                <ext:Container Width="150" runat="server"> <%--right menu--%>
                                    <Content>
                                        east
                                    </Content>
                                </ext:Container>
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Container>
                <ext:Container runat="server" ColumnWidth="0.5" />
            </Items>
        </ext:Panel>
    Any container with any layout can have any nested container with any layout.

    I see that in the 'desired' you specify fixed height for items. In sample 0 you don't specify it. Well, it's required that top container has fixed height (or height that came from owner container) or its items have fixed height.

    Something like this:

    Example
    <%@ Page Language="C#" %>
    
    <%@ 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>
    <head>
         <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Panel runat="server" Layout="Column" Height="400">
            <Items>
                <ext:Container runat="server" ColumnWidth="0.5" />
                <ext:Container runat="server" Width="900">
                    <Items>
                        <ext:HyperLink Text="Top links" runat="server" />
                        <ext:Container Layout="ColumnLayout" runat="server">
                            <Items>
                                <ext:Container ColumnWidth="1" runat="server">
                                    <%--main site--%>
                                    <Content>
                                        main
                                    </Content>
                                </ext:Container>
                                <ext:Container Width="150" runat="server">
                                    <%--right menu--%>
                                    <Content>
                                        east
                                    </Content>
                                </ext:Container>
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Container>
                <ext:Container runat="server" ColumnWidth="0.5" />
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
    I you need AutoHeight="true" for container with 'column' layout, please specify:
    <LayoutConfig>
        <ext:ColumnLayoutConfig FitHeight="false" />
    </LayoutConfig>
    for this container.
    Last edited by Daniil; Feb 24, 2011 at 8:52 AM.
  3. #23
    Quote Originally Posted by SouthDeveloper View Post
    3.1 Cotent is rendering different from Items [see sample 1];
    Please investigate
    http://forums.ext.net/showthread.php?9132
    http://forums.ext.net/showthread.php?9524
  4. #24
    Quote Originally Posted by SouthDeveloper View Post
    3.2 It doesnt add horizontal bar if screen size is reduced [see sample 2];
    [/CODE]Sample 1:
        <ext:Container runat="server" Layout="hbox">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Align="Middle" />
            </LayoutConfig>
            <Items>
                <ext:Container runat="server" Flex="1" />
                <ext:Container Width="900" runat="server">
                    <Items>
                        <ext:DisplayField Text="This Show" runat="server" />
                        <ext:Container runat="server" Layout="hbox">
                            <Items>
                                <ext:Container runat="server" Flex="1">
                                    <Content>
                                        Site body
                                    </Content>
                                </ext:Container>
                                <ext:Container Width="150" runat="server">
                                    <Content>
    /* In my site code I am content here, because FormPanel is replaced by   <asp:ContentPlaceHolder ID="east" runat="server" /> */
                                        <ext:FormPanel AutoHeight="true" runat="server">
                                            <Content>
                                                <ext:HyperLink Text="Link 1" runat="server" />
                                                <ext:HyperLink Text="Link 1" runat="server" />
                                                <ext:HyperLink Text="Link 1" runat="server" />
                                            </Content
                                        </ext:FormPanel>
                                    </Content>
                                </ext:Container>
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Container>
                <ext:Container runat="server" Flex="1" />
            </Items>
        </ext:Container>
    Please set AutoScroll="true" for DisplayField or for its container.
  5. #25
    Quote Originally Posted by SouthDeveloper View Post
    3.3 If you start with a screen size reduced and maximize, text content is cutted [see sample 2].

    [/CODE]Sample 2:
     <ext:Container runat="server" Layout="hbox">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Align="Middle" />
            </LayoutConfig>
            <Items>
                <ext:Container runat="server" Flex="1" />
                <ext:Container Width="900" runat="server">
                    <Items>
                        <ext:DisplayField Text="This Showwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwws"
                            runat="server" />
                    </Items>
                </ext:Container>
                <ext:Container runat="server" Flex="1" />
            </Items>
        </ext:Container>
    Please set MonitorResize="true" for top Panel.
    <ext:Container runat="server" Layout="hbox" MonitorResize="true">
  6. #26
    At the end of all I would suggest you to keep one question is one thread.

    I understand these questions are rather related to each other but you can see how big became this thread.

    Well, here are the answers on the question that was in the initial post:
    http://forums.ext.net/showthread.php?12533#post51556
    http://forums.ext.net/showthread.php?12533#post51557

    I can suggest to continue only this topic in the current thread.

    Please review other answers which are not related to the initial post and start new threads if will need.
  7. #27
    Okay. Please, mark as posted. I wont post in this one anymore.
  8. #28
    Please clarify is the initial problem is solved?
  9. #29
    One sec then, I will show you the outcome.
  10. #30
    Hi,

    Summary for all other members which have the same issues:

    1. Center layout is not working;
    Yes, it is pretty old layout which is not adjusted for latest code. Can be marked as deprecated

    2. Column layout doesnt support nesting another column layout [see sample 0];;
    Any layout supports any nesting
    Please see fixed [sample 0] (need to set FitHeight="false" for column layout config and set any none zero height for side (spacers) panels )

    <%@ Page Language="C#" %>
    <%@ 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>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Panel runat="server" AutoHeight="true" Layout="Column">        
                  <LayoutConfig>
                    <ext:ColumnLayoutConfig FitHeight="false" />
                  </LayoutConfig>
                  <Items>
                    <ext:Container runat="server" ColumnWidth="0.5" Height="10" />
                    <ext:Container runat="server" AutoHeight="true" Width="900">
                        <Items>
                            <ext:HyperLink Text="Top links" runat="server" />
                            <ext:Container Layout="ColumnLayout" runat="server">
                                <Items>
                                    <ext:Container ColumnWidth="1" runat="server"> <%--main site--%>
                                        <Content>
                                            main
                                        </Content>
                                    </ext:Container>
                                    <ext:Container Width="150" runat="server"> <%--right menu--%>
                                        <Content>
                                            east
                                        </Content>
                                    </ext:Container>
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                    <ext:Container runat="server" ColumnWidth="0.5" Height="10"/>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    3. Hbox is the best of all, but still not working also:
    3.1 Cotent is rendering different from Items [see sample 1];
    Content and Items are different concepts. I suggest do not use Content if it is possible because widgets in Content are out layout logic.
    See http://forums.ext.net/showthread.php...ll=1#post36120
    If you need to add a widget to Items collection but the widget inside user control or master page placeholder then you can wrap that widget by layout control and add widget to Content region of a container. In this case, widget from user control will be rendered inside Items collection

    Page
    <ext:Panel ..>
        <Content>
               <uc1:MyUserControl ... />
        </Content>
    </ext:Panel>
    UserControl
       <%@ Control .... >
    
       <ext:ContainerLayout ...>
             <Items>
                     <ext:Panel ... />
             </Items>
       </ext:ContainerLayout>
    3.2 It doesnt add horizontal bar if screen size is reduced [see sample 2];
    3.3 If you start with a screen size reduced and maximize, text content is cutted [see sample 2].
    If browser is resized then need relayout items therefore need manually listen browser window resize (WindowResize event of ResourceManager) or set MonitorResize="true" for container (in this case, the widget will automatically call dolayout when window is resized, please use it for widgets are outside Items collection only)
Page 3 of 4 FirstFirst 1234 LastLast

Similar Threads

  1. [CLOSED] Localization - EventMasks and stuff without ID?
    By wagger in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 08, 2011, 6:02 AM
  2. Replies: 0
    Last Post: Mar 25, 2011, 3:12 PM
  3. [CLOSED] Basic Layout question for Layout Fit / AutoHeight
    By macap in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 07, 2010, 11:57 AM
  4. [1.0] Gridpanel GroupingView flying button
    By SouthDeveloper in forum Bugs
    Replies: 4
    Last Post: Feb 25, 2010, 4:56 PM
  5. Replies: 1
    Last Post: Oct 13, 2008, 12:42 PM

Posting Permissions