[CLOSED] Gridpanel enable horizontal scrollbars

  1. #1

    [CLOSED] Gridpanel enable horizontal scrollbars

    Hi,

    I want to enable horizontal scrollbar in the gridpanel, but without disable autoheight. If i enable autoheight the scrollbars donīt appears. I donīt need vertical scrollbar just the horizontal.
    I tried to put my grid into a Panel but the results were the same.

    Here is my code:

    <ext:Panel ID="Panel1" runat="server" Region="Center" Layout="fit">
            <Items>
                <ext:GridPanel ID="grdGenerica" runat="server" Cls="x-grid-custom" Header="false"
                    Border="true" StripeRows="true" TrackMouseOver="true" AutoScroll="true" AutoHeight="true" MonitorResize="true"
                    MonitorWindowResize="true" AutoRender="true">
                    <TopBar>
                    </TopBar>
                    <Store>
                        <ext:Store ID="storeGenerico" runat="server" OnSubmitData="storeGenerico_Submit"
                            OnRefreshData="storeGenerico_RefreshData">
                            <DirectEventConfig IsUpload="true" />
                            <Reader>
                                <ext:JsonReader />
                            </Reader>
                            <Listeners>
                                <Remove Handler="if (typeof(#{grdGenerica})=='undefined') {return};var grid = #{grdGenerica}; grid.getEl().setVisibilityMode(Ext.Element.DISPLAY);var label= #{lblMessage}; if (store.data.length>0) { grid.getEl().show();label.hide()} else {grid.getEl().hide();label.show();}" />
                                <DataChanged Handler="if (typeof(#{grdGenerica})=='undefined') {return};var grid = #{grdGenerica};grid.getEl().setVisibilityMode(Ext.Element.DISPLAY);var label= #{lblMessage}; if (store.data.length>0) { grid.getEl().show();label.hide()} else {grid.getEl().hide();label.show();}" />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <Listeners>
                        <AfterRender Handler="if(item.getStore().data.length==0){item.getEl().setVisibilityMode(Ext.Element.DISPLAY);item.getEl().hide();}" />
                    </Listeners>
                    <LoadMask Msg="Cargando datos..." ShowMask="true" />
                    <DirectEvents>
                        <Command OnEvent="GridCommandButtonClick" Buffer="250">
                            <EventMask ShowMask="true" />
                            <ExtraParams>
                                <ext:Parameter Name="command" Value="command" Mode="Raw" />
                                <ext:Parameter Name="id" Value="record.id" Mode="Raw" />
                                <ext:Parameter Name="URL" Value="record.id" Mode="Raw" />
                            </ExtraParams>
                        </Command>
                    </DirectEvents>
                    <View>
                        <ext:GridView ID="grvGenerica" runat="server">
                        </ext:GridView>
                    </View>
                </ext:GridPanel>
            </Items>
        </ext:Panel>
    Last edited by geoffrey.mcgill; Feb 13, 2012 at 9:02 PM. Reason: [CLOSED]
  2. #2
    Hi,

    FitLayout stretches a container's item to its width and height. So, it's inconsistent with AutoHeight="true" and scrolling.

    To get horizontal scrolling you should:

    1. Remove Layout="fit" for the Panel1.

    2. Set up AutoScroll="true" for the Panel1.

    3. Set up fixed Width for the GridPanel.
  3. #3
    I did the changes but the horizontal scrollbar didnīt show


     <ext:Panel ID="Panel1" runat="server" Region="Center" AutoScroll="true" >
            <Items>
                <ext:GridPanel ID="grdGenerica" runat="server" Cls="x-grid-custom" Header="false"
                    Border="true" StripeRows="true" TrackMouseOver="true" AutoScroll="true" AutoHeight="true" MonitorResize="true"
                    MonitorWindowResize="true" AutoRender="true" width="1000px">
                    <TopBar>
                    </TopBar>
                    <Store>
                        <ext:Store ID="storeGenerico" runat="server" OnSubmitData="storeGenerico_Submit"
                            OnRefreshData="storeGenerico_RefreshData">
                            <DirectEventConfig IsUpload="true" />
                            <Reader>
                                <ext:JsonReader />
                            </Reader>
                            <Listeners>
                                <Remove Handler="if (typeof(#{grdGenerica})=='undefined') {return};var grid = #{grdGenerica}; grid.getEl().setVisibilityMode(Ext.Element.DISPLAY);var label= #{lblMessage}; if (store.data.length>0) { grid.getEl().show();label.hide()} else {grid.getEl().hide();label.show();}" />
                                <DataChanged Handler="if (typeof(#{grdGenerica})=='undefined') {return};var grid = #{grdGenerica};grid.getEl().setVisibilityMode(Ext.Element.DISPLAY);var label= #{lblMessage}; if (store.data.length>0) { grid.getEl().show();label.hide()} else {grid.getEl().hide();label.show();}" />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <Listeners>
                        <AfterRender Handler="if(item.getStore().data.length==0){item.getEl().setVisibilityMode(Ext.Element.DISPLAY);item.getEl().hide();}" />
                    </Listeners>
                    <LoadMask Msg="Cargando datos..." ShowMask="true" />
                    <DirectEvents>
                        <Command OnEvent="GridCommandButtonClick" Buffer="250">
                            <EventMask ShowMask="true" />
                            <ExtraParams>
                                <ext:Parameter Name="command" Value="command" Mode="Raw" />
                                <ext:Parameter Name="id" Value="record.id" Mode="Raw" />
                                <ext:Parameter Name="URL" Value="record.id" Mode="Raw" />
                            </ExtraParams>
                        </Command>
                    </DirectEvents>
                    <View>
                        <ext:GridView ID="grvGenerica" runat="server">
                        </ext:GridView>
                    </View>
                </ext:GridPanel>
            </Items>
        </ext:Panel>
  4. #4
    Please edit the post wrapping the code in [CODE ] tags, see:
    Forum Guidelines For Posting New Topics
  5. #5
    Sorry, now the post is well formatted
  6. #6
    What browser do you test with?
  7. #7
    Google Chrome 16.0.912.77 m
  8. #8
    Thanks. I have tested under Chrome as well and horizontal scrolling appears in my test case.

    Please provide your test case.

    Example

    <%@ 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)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                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:Panel 
                runat="server" 
                Layout="BorderLayout" 
                Height="200" 
                Width="200">
                <Items>
                    <ext:Panel runat="server" Region="Center" AutoScroll="true">
                        <Items>
                            <ext:GridPanel 
                                ID="GridPanel1" 
                                runat="server" 
                                AutoHeight="true" 
                                Width="300">
                                <Store>
                                    <ext:Store runat="server">
                                        <Reader>
                                            <ext:ArrayReader>
                                                <Fields>
                                                    <ext:RecordField Name="test1" />
                                                    <ext:RecordField Name="test2" />
                                                    <ext:RecordField Name="test3" />
                                                </Fields>
                                            </ext:ArrayReader>
                                        </Reader>
                                    </ext:Store>
                                </Store>
                                <ColumnModel runat="server">
                                    <Columns>
                                        <ext:Column Header="Test1" DataIndex="test1" />
                                        <ext:Column Header="Test2" DataIndex="test2" />
                                        <ext:Column Header="Test3" DataIndex="test3" />
                                    </Columns>
                                </ColumnModel>
                            </ext:GridPanel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Horizontal Scrollbars Not Appearing for Panel Contents
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 29, 2012, 8:15 PM
  2. [CLOSED] AutoHeight gridpanel and scrollbars
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 22, 2010, 5:06 PM
  3. Replies: 4
    Last Post: Sep 14, 2010, 4:52 PM
  4. [CLOSED] GridPanel vertical scrollbars
    By state in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 14, 2009, 7:07 PM
  5. [CLOSED] GridPanel scrollbars
    By danielg in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 21, 2009, 1:01 AM

Tags for this Thread

Posting Permissions