[CLOSED] IE6 - layout - Stuff flying arround

**SouthDeveloper** · Feb 24, 2011, 9:44 AM

I forgot to take out fixed height of 'desired' before posting

I tried adding a main/right column, but it didnt work out.

Also, this code doesnt create a horizontal scroll bar, it moves the grid around when the screen size is reduced. Try reducing the screen on www.ext.net to see the difference. A commercial site's layout works like www.ext.net (plus center for mine).

Please, mark as solved. I cant afford to spend more time on this.

Thank you for all you help, but this is consuming too much of my time, leaving no time for other parts of the site.

<%@ 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:Container runat="server" AutoScroll="true" Layout="hbox" StyleSpec="position: relative;">
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="Middle" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Container runat="server" Flex="1">
                                        <Items>
                                            <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>
                                        </Items>
                                    </ext:Container>
                                    <ext:Container runat="server" Width="150" />
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                    <ext:Container runat="server" Flex="1" />
                </Items>
            </ext:Container>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

**SouthDeveloper** · Feb 24, 2011, 11:24 AM

Thanks! Please, mark as solved.

Originally Posted by Vladimir

Hi,

Summary for all other members which have the same issues:

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

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>

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>

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)

**Vladimir** · Feb 24, 2011, 11:32 AM

Hi,

On you first code, If I set autoscroll = true on the panel, the scroll bar adds a scrollbar, it doesnt use the browser's. Where should I set autoscroll so it uses the browser´s scrollbar? (the layout I need it the same as you guys used in www.ext.net )

What does you mean "browser´s scrollbar"? For me scroller appear on far right in that sample. Can you post the screenshots what you get and what do you expect?

On the second code, I need use content, since I need to add <asp:ContentPlaceHolder ID="center" runat="server" />. The layout is being added in the master page.

You have to wrap by layout control a placeholder code

**SouthDeveloper** · Feb 24, 2011, 11:39 AM

Hi, Vladmir!

I mean the horizontal scrollbar.

I combined ext and html and i got a solution. Thanks for all the help.

Final solution bellow.

Thanks

<ext:Panel runat="server" AutoScroll="true" AutoHeight="true" Layout="Column">                      <LayoutConfig>
                <ext:ColumnLayoutConfig FitHeight="false" />
              </LayoutConfig>
              <Items>

Solution

<html>
<head runat="server">
    <style type="text/css">
        #main
        {
            margin: 0 auto;
            width: 800px;
        }
        #sidebar
        {
            width: 200px;
            height:800px;
            background: red;
            float: left;
        }
        
        #page-wrap
        {
            width: 600px;
            float: left;
        }
    </style>
    <asp:ContentPlaceHolder ID="head" runat="server" />
</head>
<body>
    <form runat="server">
    <ext:ResourceManager Locale="pt-BR" Theme="Gray" runat="server" />
    <div id="main">
        <div id="page-wrap">
            <ext:DisplayField ID="DisplayFieldTitle" StyleSpec="font-size: 24px;" runat="server" />
            <asp:ContentPlaceHolder ID="center" runat="server" />
        </div>
        <div id="sidebar">
            <asp:ContentPlaceHolder ID="east" runat="server" />
        </div>
    </div>
    </form>
</body>
</html>

**Vladimir** · Feb 24, 2011, 12:06 PM

Hi,

Unfortunately, ColumnLayout (and HBox) doesn't provide horizontal scrolling

**SouthDeveloper** · Feb 24, 2011, 12:12 PM

Thank you all for the support. You guys are great.

Please, mark as solved.

Thread: [CLOSED] IE6 - layout - Stuff flying arround

Thread Tools

Search Thread

Display

Similar Threads

[CLOSED] Localization - EventMasks and stuff without ID?

Layout problems with GridPanel and other stuff - resources for learning layouting in EXT.NET?

[CLOSED] Basic Layout question for Layout Fit / AutoHeight

[1.0] Gridpanel GroupingView flying button

[CLOSED] So nice Coolite works with Telerik's (really Microsofts) Ajax Stuff!

Posting Permissions

Sitemap

Downloads

Resources