[CLOSED] [1.0] Various resize problems and ValidationStatus not showing

  1. #1

    [CLOSED] [1.0] Various resize problems and ValidationStatus not showing

    In the below example, I've spotted the following bugs:

    1) The PagingToolbar disappears when the window is resized smaller (in both IE6 and IE7)

    2) StatusBar disappears when the window is resized smaller, and doesn't reposition correctly when the window is maximised again (in both IE6 and IE7)

    3) The ValidationStatus errors list isn't shown when clicking on the "Form has errors..." text (in both IE6 and IE7)

    4) The header and footer of the FormPanel isn't drawn correctly (they don't fit the width of the right-hand column. Before, I added the following listener to the ViewPort to resolve this (in IE7 only):

    <AfterLayout Handler="FormPanel1.el.repaint();" Single="true" />
    Code:

    <%@ 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 = 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&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
    
                this.Store1.DataBind();
            }
        }
    </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">      
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <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>
            
            <ext:ViewPort runat="server">
                <Content>
                    <ext:ColumnLayout ID="cmlMain" runat="server" FitHeight="true">
                        <Columns>
                            <ext:LayoutColumn ColumnWidth=".5">
                                <ext:GridPanel
                                    id="grdtest"
                                    runat="server" 
                                    StripeRows="true" 
                                    Title="Test"
                                    TrackMouseOver="true"
                                    StoreID="Store1" 
                                    Frame="true"
                                    StyleSpec="padding-right: 6px;" Stateful="false">
                                    <TopBar>
                                        <ext:Toolbar ID="Toolbar1"
                                            runat="server">
                                            <Items>
                                                <ext:Button
                                                    id="btnAdd"
                                                    runat="server"
                                                    Icon="Add"
                                                    Text="Add new record"
                                                    ToolTip="Create a new record">
                                                </ext:Button>
                                            </Items>    
                                        </ext:Toolbar>
                                    </TopBar>
                                    <ColumnModel ID="ColumnModel2" runat="server">
                                        <Columns>
                                            <ext:RowNumbererColumn />
                                            <ext:Column DataIndex="company" Width="300" Header="Title"></ext:Column>
                                        </Columns>
                                    </ColumnModel>
                                    <BottomBar>
                                        <ext:PagingToolBar 
                                            ID="grdPager" 
                                            runat="server"
                                            PageSize="20" 
                                            StoreID="Store1"
                                            EmptyMsg="No items found">
                                        </ext:PagingToolBar>
                                    </BottomBar>
                                    <LoadMask ShowMask="true" />
                                </ext:GridPanel>
                            </ext:LayoutColumn>
                            <ext:LayoutColumn ColumnWidth=".5">
                                <ext:FormPanel 
                                    ID="FormPanel1" 
                                    runat="server" 
                                    BodyStyle="background-color:transparent; border: 1px solid #99bbe8; padding: 6px;"
                                    Frame="true"
                                    Title="Test"
                                    Layout="Form">
                                    <Items>
                                        <ext:TextField 
                                            ID="CompanyField" 
                                            runat="server" 
                                            DataIndex="company" 
                                            FieldLabel="Company" 
                                            Width="260" 
                                            />
                                        <ext:NumberField 
                                            ID="PriceField" 
                                            runat="server" 
                                            DataIndex="price" 
                                            FieldLabel="Price" 
                                            Width="260" 
                                            />
                                        <ext:NumberField 
                                            ID="ChangeField" 
                                            runat="server" 
                                            DataIndex="change" 
                                            FieldLabel="Change" 
                                            Width="260" 
                                            />
                                        <ext:NumberField 
                                            ID="PctChangeField" 
                                            runat="server" 
                                            DataIndex="pctChange" 
                                            FieldLabel="PctChange" 
                                            Width="260" 
                                            />
                                        <ext:DateField 
                                            ID="LastChangeField" 
                                            runat="server" 
                                            DataIndex="lastChange" 
                                            FieldLabel="Last change" 
                                            Width="260" 
                                            />
                                    </Items>
                                    <BottomBar>
                                        <ext:StatusBar runat="server" Height="27">
                                            <Plugins>
                                                <ext:ValidationStatus runat="server" FormPanelID="FormPanel1"></ext:ValidationStatus>
                                            </Plugins>
                                        </ext:StatusBar>
                                    </BottomBar>
                                </ext:FormPanel>
                            </ext:LayoutColumn>
                        </Columns>
                    </ext:ColumnLayout>
                </Content>
                <Listeners>
                    <AfterLayout Handler="FormPanel1.el.repaint();" Single="true" />
                </Listeners>
            </ext:ViewPort>
        </form>
    </body>
    </html>
    Thanks

    Dan
  2. #2

    RE: [CLOSED] [1.0] Various resize problems and ValidationStatus not showing

    Hi,

    Thanks for the report. I think the problem related with current ExtJS bug (AfterLayout event is not fired)
    http://www.extjs.com/forum/showthread.php?t=90181


    I'll try to find workaround and let you know when that issue will be fixed.
  3. #3

    RE: [CLOSED] [1.0] Various resize problems and ValidationStatus not showing

    Hi,

    Can you update from SVN and retest? That listener can be deleted
  4. #4

    RE: [CLOSED] [1.0] Various resize problems and ValidationStatus not showing

    Thanks Vladimir.

    Dan
  5. #5

    RE: [CLOSED] [1.0] Various resize problems and ValidationStatus not showing

    I've updated from SVN and everything appears to be fine now, thanks.

    Dan

Similar Threads

  1. [CLOSED] Problems showing an aspx page within a window
    By digitek in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 22, 2012, 1:07 PM
  2. [CLOSED] Problems hiding/showing TreeGrid columns
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Sep 13, 2011, 9:24 PM
  3. [CLOSED] Problems with layouts after hiding/showing
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Jul 29, 2011, 3:53 AM
  4. [CLOSED] [1.0] Portal resize and scrollbar problems
    By danielg in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 02, 2009, 9:12 AM
  5. Replies: 3
    Last Post: Feb 22, 2009, 2:58 PM

Posting Permissions