[CLOSED] Horizontal Scrollbar in GridPanel missing.

  1. #1

    [CLOSED] Horizontal Scrollbar in GridPanel missing.

    Please see the code below. I am missing the horizontal scrollbar in the GridPanel even though it is off the screen. I added some extra columns on purpose to show the error. My screen is 1366x768 and i use ext 1.6. Notice the additional problem when you expand and contract the East Panel. You would expect that the scrollbar would appear or be dynamic.

    Danill, I emailed you a 14MB zip file (full project) for the last JS defect. If you just replace the code in the ViewJsCrash.aspx file with the code below, you can run the full example.


    IE 8 and no compatibility mode.

    Thanks,
    /Z


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewJsCrash.aspx.cs" Inherits="Crystal.Views.Customer.ViewJsCrash" %>
    <%@ 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 id="Head1" runat="server">
        <title>ViewJsCrash</title>
        
        <script type="text/javascript" src="/resources/js/common.js"></script>
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
        </script>
        <style type="text/css">
            .add32 {
                background-image: url(/resources/images/airplane.png) !important;
            }
        </style>
    </head>
    <body>
        <form id="FormSearchTest" runat="server">
            <ext:ResourceManager ID="ResourceManagerSearchTest" runat="server" />
            <ext:GridPanel 
                ID="GridPanelSearchResults" 
                runat="server" 
                TitleCollapse="true"
                Frame="false" 
                AutoHeight="true"
                X="0"
                Y="0"
                AutoScroll="true"
                AutoRender="true">
                <Store>
                    <ext:Store ID="StoreSearchResults" runat="server" RemoteSort="false" AutoLoad="true">
                        <Proxy>
                            <ext:HttpProxy Method="GET" Url="/Customer/FindCustomers" />
                        </Proxy>
                        <BaseParams>
                            <ext:Parameter Name="start" Value="={0}" />
                            <ext:Parameter Name="limit" Value="={20}" />
                        </BaseParams>
                        <Reader>
                            <ext:JsonReader Root="data" IDProperty="id" TotalProperty="total">
                                <Fields>
                                    <ext:RecordField Name="id" Type="Int" />
                                    <ext:RecordField Name="firstName" Type="String" />
                                    <ext:RecordField Name="lastName" Type="String" />
                                    <ext:RecordField Name="status" Type="String" />
                                    <ext:RecordField Name="title" Type="String" />
                                    <ext:RecordField Name="country" Type="String" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:CommandColumn Width="35">
                            <Commands>
                                <ext:GridCommand Icon="NoteEdit" CommandName="Edit">
                                    <ToolTip Text="Edit" />
                                </ext:GridCommand>
                            </Commands>
                        </ext:CommandColumn>
                        <ext:Column ColumnID="id" Header="Test Id" DataIndex="id" Width="75" Sortable="true" Hidden="false" />
                        <ext:Column ColumnID="firstName" Header="First Name" DataIndex="firstName" Width="100"  Sortable="true" />
                        <ext:Column ColumnID="firstName1" Header="First Name1" DataIndex="firstName" Width="100"  Sortable="true" />
                        <ext:Column ColumnID="firstName2" Header="First Name2" DataIndex="firstName" Width="100"  Sortable="true" />
                        <ext:Column ColumnID="firstName3" Header="First Name3" DataIndex="firstName" Width="100"  Sortable="true" />
                        <ext:Column ColumnID="firstName4" Header="First Name4" DataIndex="firstName" Width="100"  Sortable="true" />
                        <ext:Column ColumnID="lastName" Header="Last Name" DataIndex="lastName" Width="100"  Sortable="true" />
                        <ext:Column ColumnID="status" Header="Status" DataIndex="status" Width="100" Align="right"  Sortable="true" />
                        <ext:Column ColumnID="title" Header="Title" DataIndex="title" Width="100"  Sortable="true" />
                        <ext:Column ColumnID="country" Header="Country" DataIndex="country" Width="100"  Sortable="true" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" />
                </SelectionModel>            
                <Listeners>
                    <Command Handler="openTab('Customer','JsTab2', record.data.id);" />
                </Listeners>  
                <BottomBar>
                    <ext:PagingToolbar ID="Test_PagingToolbarDeviceGroup" 
                        runat="server" 
                        PageSize="20"
                        DisplayInfo="true" 
                        DisplayMsg="Displaying results {0} - {1} of {2}" 
                        EmptyMsg="No results to display" 
                        />
                </BottomBar>
                <LoadMask ShowMask="true" />
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Dec 10, 2012 at 1:32 PM. Reason: [CLOSED]
  2. #2
    Danill, I emailed you a 14MB zip file (full project) for the last JS defect.
    Unfortunately this .zip file will be deleted. We cannot accept unsolicited sample projects.

    If you need to demonstrate how to reproduce an issue, please post a simplified .aspx code sample in the forums.
    Geoffrey McGill
    Founder
  3. #3
    Hi @Z,

    Reviewed your code posted here, I can suggest to remove the GridPanel's AutoHeight="true" setting and apply these things:

    <ext:Viewport runat="server" Layout="AnchorLayout">
        <Items>
            <ext:GridPanel ... Anchor="100% 100%">
                ...
            </ext:GridPanel>
        </Items>
    </ext:Viewport>
  4. #4
    Worked great!
    Thxs.
    /Z

Similar Threads

  1. Enable Horizontal scrollbar in gridpanel
    By Aswini Ladish in forum 1.x Help
    Replies: 18
    Last Post: Dec 05, 2012, 9:25 AM
  2. [CLOSED] GridPanel Horizontal Scrollbar does not exist
    By tansu in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 28, 2012, 7:11 PM
  3. No horizontal scrollbar displayed
    By benti in forum 1.x Help
    Replies: 1
    Last Post: Aug 08, 2011, 5:39 PM
  4. [CLOSED] GridPanel horizontal scrollbar
    By jeybonnet in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 27, 2011, 6:00 AM
  5. [CLOSED] IE6 - Treepanel - no horizontal scrollbar
    By seanwo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 07, 2010, 3:58 PM

Posting Permissions