[CLOSED] ColumnLayout Fit Problem

  1. #1

    [CLOSED] ColumnLayout Fit Problem

    Hi all,

    I couldn't find a way to fit "TabPanel1" and "TabPanel2" in ColumnLayout as example below. Is there change in version 2.2 that causes this?

    How can i fit them in "Panel1"? Now, scroll is not shown and all data can't be seen.

    <%@ 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" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/2 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/2 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/2 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/2 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <style>
            .x-grid-row-over .x-grid-cell-inner
            {
                font-weight: bold;
            }
        </style>
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
        <ext:Panel ID="Panel1" runat="server" Layout="ColumnLayout" Border="true" Height="150">
            <Bin>
                <ext:Store ID="Store1" runat="server" IDMode="Static">
                    <Model>
                        <ext:Model runat="server" ID="ctl03">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Bin>
            <Items>
                <ext:TabPanel ID="TabPanel1" runat="server" Plain="true" EnableTabScroll="true" PaddingSpec="0 5 0 0"
                    ColumnWidth=".5">
                    <Items>
                        <ext:GridPanel
                            ID="GridPanel1"
                            runat="server"
                            Title="Array Grid"
                            Width="600" IDMode="Static"
                            StoreID="Store1">
                            <ColumnModel>
                                <Columns>
                                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                                    <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
                                        <Renderer Format="UsMoney" />
                                    </ext:Column>
                                    <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
                                        <Renderer Fn="change" />
                                    </ext:Column>
                                    <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
                                        <Renderer Fn="pctChange" />
                                    </ext:Column>
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Items>
                </ext:TabPanel>
                <ext:TabPanel ID="TabPanel2" runat="server" Plain="true" EnableTabScroll="true" PaddingSpec="0 5 0 0"
                    ColumnWidth=".5">
                    <Items>
                        <ext:GridPanel
                            ID="GridPanel2"
                            runat="server"
                            Title="Array Grid"
                            Width="600" IDMode="Static"
                            StoreID="Store1">
                            <ColumnModel>
                                <Columns>
                                    <ext:Column ID="Column5" runat="server" Text="Company" DataIndex="company" Flex="1" />
                                    <ext:Column ID="Column6" runat="server" Text="Price" DataIndex="price">
                                        <Renderer Format="UsMoney" />
                                    </ext:Column>
                                    <ext:Column ID="Column7" runat="server" Text="Change" DataIndex="change">
                                        <Renderer Fn="change" />
                                    </ext:Column>
                                    <ext:Column ID="Column8" runat="server" Text="Change" DataIndex="pctChange">
                                        <Renderer Fn="pctChange" />
                                    </ext:Column>
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Panel>
    </body>
    </html>
    Last edited by Daniil; Apr 30, 2013 at 1:34 PM. Reason: [CLOSED]
  2. #2
    Hi @vzx,

    Yes, there was a change since Ext.NET v1. Not a ColumnLayout doesn't manage items' height.

    I can't suggest to switch to an HBoxLayout.

    1. Please remove Layout="ColumnLayout" of the Panel.

    2. Set up the following for that Panel.
    <LayoutConfig>
        <ext:HBoxLayoutConfig Align="Stretch" />
    </LayoutConfig>
    3. Replace ColumnWidth=".5" with Flex="1" for both the TabPanels.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @vzx,

    Yes, there was a change since Ext.NET v1. Not a ColumnLayout doesn't manage items' height.

    I can't suggest to switch to an HBoxLayout.

    1. Please remove Layout="ColumnLayout" of the Panel.

    2. Set up the following for that Panel.
    <LayoutConfig>
        <ext:HBoxLayoutConfig Align="Stretch" />
    </LayoutConfig>
    3. Replace ColumnWidth=".5" with Flex="1" for both the TabPanels.
    Thanks Daniil.

Similar Threads

  1. some problem with ColumnLayout
    By Soy in forum 2.x Help
    Replies: 0
    Last Post: Apr 27, 2013, 8:02 AM
  2. [CLOSED] [1.0] ColumnLayout Problem
    By thedarklord in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 23, 2010, 5:34 PM
  3. [CLOSED] [1.0] ColumnLayout Problem
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 20, 2010, 2:22 PM
  4. [CLOSED] ColumnLayout render problem
    By danielg in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 12, 2009, 8:10 AM
  5. ColumnLayout Problem/Bug
    By simbal in forum 1.x Help
    Replies: 0
    Last Post: Apr 13, 2009, 9:41 PM

Tags for this Thread

Posting Permissions