[CLOSED] [1.0] GridPanel - excessive scrolling

  1. #1

    [CLOSED] [1.0] GridPanel - excessive scrolling

    In the example below, click on the "Show window" button to display the window. The GridPanel has a vertical scroll bar, even though it's not required, and I can't appear to get rid of it - it only disappears when I select one of the rows within the grid. I've reproduced this problem in IE8 - haven't tested in other browsers yet.

    It only seems to be a problem when the window is rendered in a hidden state.

    Is there a fix for this problem, or am I missing something?

    Thanks

    Dan

    <%@ 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 id="Head1" runat="server">
          <script runat="server">
          
              protected void Page_Load(object sender, EventArgs e)
              {
                  Store1.DataSource = new object[]
                  {
                      new object[] { 1, "Test1", "Test1" },
                      new object[] { 2, "Test1", "Test2" },
                      new object[] { 3, "Test2", "Test3" },
                      new object[] { 4, "Test2", "Test4" },
                      new object[] { 5, "Test2", "Test5" },
                      new object[] { 6, "Test1", "Test1" },
                      new object[] { 7, "Test3", "Test2" },
                      new object[] { 8, "Test4", "Test3" },
                      new object[] { 9, "Test5", "Test4" },
                      new object[] { 10, "Test6", "Test5" },
                      new object[] { 11, "Test7", "Test1" }                          
                  };
                  Store1.DataBind();
              }
              
          </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager>
    
            <ext:Store runat="server" ID="Store1" GroupField="Type">
                <Reader>
                    <ext:ArrayReader IDProperty="ID">
                        <Fields>
                            <ext:RecordField Name="ID" Type="Int" />
                            <ext:RecordField Name="Type"></ext:RecordField>
                            <ext:RecordField Name="Title"></ext:RecordField>
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
            
            <ext:Button runat="server" Text="Show window" OnClientClick="wndTest.show();"></ext:Button>
    
            <ext:Window runat="server" Title="Test" Width="600" Height="350" ID="wndTest" Hidden="true">
                <Items>
                    <ext:FitLayout ID="FitLayout2" runat="server">
                        <Items>
                            <ext:Panel ID="pnlResources" runat="server" Border="false">
                                <Items>
                                    <ext:HBoxLayout ID="HBoxLayout1" runat="server" Align="Stretch">
                                        <BoxItems>
                                            <ext:BoxItem Flex="1">
                                                <ext:GridPanel
                                                    ID="GridPanel1"
                                                    runat="server" 
                                                    AutoExpandColumn="Type" 
                                                    StoreID="Store1">
                                                    <ColumnModel ID="ColumnModel1" runat="server">
                                                    <Columns>
                                                        <ext:Column ColumnID="Type" Header="Type" DataIndex="Type" />
                                                        <ext:Column Header="Title" DataIndex="Title" Width="130" />
    
                                                        <ext:CommandColumn Hidden="true">
                                                            <GroupCommands>
                                                                <ext:CommandFill />
                                                                <ext:GridCommand Icon="TableRow" CommandName="SelectGroup">
                                                                    <ToolTip Title="Select" Text="Select all" />
                                                                </ext:GridCommand>
                                                                <ext:GridCommand Icon="Table" CommandName="DeselectGroup">
                                                                    <ToolTip Title="Deselect" Text="Deselect all" />
                                                                </ext:GridCommand>
                                                            </GroupCommands>
                                                        </ext:CommandColumn>
                                                    </Columns>
                                                    </ColumnModel>
                                                    <SelectionModel>
                                                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                                                    </SelectionModel>
                                                    <View>
                                                        <ext:GroupingView  
                                                            ID="GroupingView1"
                                                            HideGroupedColumn="true"
                                                            runat="server" 
                                                            ForceFit="true"
                                                            StartCollapsed="true">
                                                        </ext:GroupingView>
                                                    </View>
                                                </ext:GridPanel>
                                            </ext:BoxItem>
                                            <ext:BoxItem Flex="1">
                                                <ext:Panel runat="server">
                                                    <Content>
                                                        <p>Test</p>
                                                    </Content>
                                                </ext:Panel>
                                            </ext:BoxItem>
                                        </BoxItems>
                                    </ext:HBoxLayout>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:FitLayout>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 31, 2010 at 8:30 AM. Reason: [CLOSED]
  2. #2
    Hi Dan,

    Yes, there does appear to be a small issue calculating the height when the GridView starts hidden.

    Here's a temp work-around and we'll try to figure out a permanent fix. The work-around gets an instance of the GridView, then focuses the Row.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            var store = this.GridPanel1.GetStore();
            
            store.DataSource = new object[]
            {
                new object[] { 1, "Test1", "Test1" },
                new object[] { 2, "Test1", "Test2" },
                new object[] { 3, "Test2", "Test3" },
                new object[] { 4, "Test2", "Test4" },
                new object[] { 5, "Test2", "Test5" },
                new object[] { 6, "Test1", "Test1" },
                new object[] { 7, "Test3", "Test2" },
                new object[] { 8, "Test4", "Test3" },
                new object[] { 9, "Test5", "Test4" },
                new object[] { 10, "Test6", "Test5" },
                new object[] { 11, "Test7", "Test1" }                          
            };
            
            store.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 runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
     
            <ext:Button runat="server" Text="Show" OnClientClick="Window1.show();" />
     
            <ext:Window 
                ID="Window1" 
                runat="server" 
                Title="Test" 
                Width="600" 
                Height="350" 
                Hidden="true" 
                Layout="fit">
                <Items>
                    <ext:GridPanel ID="GridPanel1" runat="server" AutoExpandColumn="Type">
                        <Store>
                            <ext:Store runat="server" GroupField="Type">
                                <Reader>
                                    <ext:ArrayReader IDProperty="ID">
                                        <Fields>
                                            <ext:RecordField Name="ID" Type="Int" />
                                            <ext:RecordField Name="Type" />
                                            <ext:RecordField Name="Title" />
                                        </Fields>
                                    </ext:ArrayReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column ColumnID="Type" Header="Type" DataIndex="Type" />
                                <ext:Column Header="Title" DataIndex="Title" />
                            </Columns>
                        </ColumnModel>
                        <View>
                            <ext:GroupingView 
                                HideGroupedColumn="true"
                                runat="server"
                                ForceFit="true"
                                StartCollapsed="true"
                                />
                        </View>
                    </ext:GridPanel>
                </Items>
                <Listeners>
                    <Show Handler="#{GridPanel1}.getView().focusRow(0);" />
                </Listeners>
            </ext:Window>
        </form>
    </body>
    </html>
    Geoffrey McGill
    Founder
  3. #3
    Hi,

    The problem occurs when use HBoxLayout inside hidden area (hidden window). Solution: prevent window's content rendering until showing.
    Please add the following properties to the Window
    AutoRender="false" DefaultRenderTo="Form"
  4. #4
    Thanks both for your replies - both responses fix the problem. Please mark as solved.

    Cheers

    Dan

Similar Threads

  1. [CLOSED] Slow Gridpanel scrolling with Firefox 14
    By dlevine in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 17, 2012, 3:04 PM
  2. [CLOSED] GridPanel Scrolling with AutoHeight set to true
    By logicspeak in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 26, 2011, 3:23 PM
  3. Virtual scrolling on gridpanel
    By yobnet in forum 1.x Help
    Replies: 1
    Last Post: Feb 17, 2010, 9:10 AM
  4. Can we load gridpanel (Datagrid) while scrolling page using..
    By Satyanarayana murthy in forum Open Discussions
    Replies: 0
    Last Post: Jul 27, 2009, 2:11 AM

Posting Permissions