What's New?

[CLOSED] Keeping a panel scrollable but not display a scroll bar automatically

  1. #1
    Jul 18, 2013, 2:46 PM

    [CLOSED] Keeping a panel scrollable but not display a scroll bar automatically

    I have a panel which contains so many "objects" that it needs to be scrollable but I don't want a scroll bar automatically displayed, I want to scroll it manually by button click. I am using Ext.getCmp(PanelID).scrollBy() as the button click handler which works perfectly as long as the panel is defined with AutoScroll = true. Unfortunately, that cause automatic scrollbar rendering. Is there any way I can scrollBy without AutoScoll having to be set?
    Last edited by Daniil; Jul 24, 2013 at 2:01 PM. Reason: [CLOSED]
  2. #2
    Jul 18, 2013, 4:24 PM
    Hi @ATLAS,

    It appears to be possible to scroll without AutoScroll setting. Tested with FireFox.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Panel 
            ID="Panel1" 
            runat="server" 
            Width="400" 
            Height="400">
            <Items>
                <ext:Container runat="server" Height="500" Layout="VBoxLayout">
                    <Items>
                        <ext:Component runat="server" Flex="1" />
                        <ext:Label runat="server" Text="Bottom" />
                    </Items>
                </ext:Container>
            </Items>
        </ext:Panel>

        <ext:Button runat="server" Text="Scroll" Handler="App.Panel1.body.scrollBy(0, 100, true);" />
    </form>
</body>
</html>
  3. #3
    Jul 24, 2013, 9:13 AM

    [REOPENED] Still issues in any browser

    Quote Originally Posted by Daniil View Post
    Hi @ATLAS,

    It appears to be possible to scroll without AutoScroll setting. Tested with FireFox.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Panel 
            ID="Panel1" 
            runat="server" 
            Width="400" 
            Height="400">
            <Items>
                <ext:Container runat="server" Height="500" Layout="VBoxLayout">
                    <Items>
                        <ext:Component runat="server" Flex="1" />
                        <ext:Label runat="server" Text="Bottom" />
                    </Items>
                </ext:Container>
            </Items>
        </ext:Panel>

        <ext:Button runat="server" Text="Scroll" Handler="App.Panel1.body.scrollBy(0, 100, true);" />
    </form>
</body>
</html>
    I have checked my site in Chrome, Firefox and IE(10) and there is still an issue. He is the code of my panel :-

    @(Html.X().Container()
      .Layout(LayoutType.HBox)
      .LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.StretchMax  })
      .Items(
          Html.X().Panel()
              .Border(false)
              .Region(Region.West)
              .Width(30)
              .Collapsible(false)
              .Split(false)
              .MinWidth(30)
              .MaxWidth(30)
              .Height(110)
              .Layout(LayoutType.VBox)
              .LayoutConfig( new VBoxLayoutConfig { Align = VBoxAlign.Center, Pack = BoxPack.Center  } )
              .Items(
                                  Html.X().ImageButton()
                                      .ImageUrl(@Url.Content("~/Content/CommonImages/32x32/Up/Carousel_Left_Grey.png"))
                                      .OverImageUrl(@Url.Content("~/Content/CommonImages/32x32/Over/Carousel_Left_Grey.png"))
                                      .DisabledImageUrl(@Url.Content("~/Content/CommonImages/32x32/Disabled/Carousel_Left_Grey.png"))
                                      .PressedImageUrl(@Url.Content("~/Content/CommonImages/32x32/Down/Carousel_Left_Grey.png"))
                                      .Listeners(ev => ev.Click.Handler =  "Ext.getCmp('" + @carouselId + "').scrollBy(205, 0, true);" )
              ),
                    
          Html.X().Panel()
              .ID(@carouselId)
              .Region(Region.Center)
              .Border(false)
              .Layout(LayoutType.HBox)
              .Flex(1)
              .AutoScroll(true)
              .Defaults(Html.X().Parameter().Name("margins").Value("0 10 0 0").Mode(ParameterMode.Value))
              .LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.StretchMax, Pack = BoxPack.Center  })
              .Items(panels =>
                  {
                      for (int i = 0; i < 10; i++)
                      {
                          panels.Add(new FormPanel
                              {
                                  Title = "FormPanel_" + Convert.ToString(i),
                                  Width = 200,
                                  Height = 110,
                                  Cls = "carousel-form-panel",
                                  HeaderPosition = Direction.Bottom,
                                  Layout = "Fit",
                                  Items =
                                      {
                                         new Image
                                              {
                                                  ImageUrl = @Url.Content("~/Content/CommonImages/CarouselHome.png"),
                                                  Width = 196,
                                                  Height = 96
                                              }
                                      }
                              });
                      }
                  }),
                      
          Html.X().Panel()
              .Border(false)
              .Region(Region.East)
              .Width(30)
              .Collapsible(false)
              .Split(false)
              .MinWidth(30)
              .MaxWidth(30)
              .Height(110)
              .Layout(LayoutType.VBox)
              .LayoutConfig( new VBoxLayoutConfig { Align = VBoxAlign.Center, Pack = BoxPack.Center  } )
              .Items(
                          Html.X().ImageButton()
                              .ImageUrl(@Url.Content("~/Content/CommonImages/32x32/Up/Carousel_Right_Grey.png"))
                              .OverImageUrl(@Url.Content("~/Content/CommonImages/32x32/Over/Carousel_Right_Grey.png"))
                              .DisabledImageUrl(@Url.Content("~/Content/CommonImages/32x32/Disabled/Carousel_Right_Grey.png"))
                              .PressedImageUrl(@Url.Content("~/Content/CommonImages/32x32/Down/Carousel_Right_Grey.png"))                         
                              .Listeners(ev => ev.Click.Handler =  "Ext.getCmp('" + @carouselId + "').scrollBy(-205, 0, true);" )
                      )
              )
      )
    If I have AutoScroll = true, using scrollBy() works in Firefox, Chrome and IE (but will automatically insert a scroll bar, which I don't want). If I set AutoScroll = false then using scrollBy() does not work in any of the above browsers.
  4. #4
    Jul 24, 2013, 12:25 PM
    Please try to keep AutoScroll true, but add the following for the carousel Panel.
    .BodyCls("my-carousel")
    <style>
    .my-carousel {
        overflow-x: hidden !important;
    }
</style>
  5. #5
    Jul 24, 2013, 1:45 PM

    That works

    Quote Originally Posted by Daniil View Post
    Please try to keep AutoScroll true, but add the following for the carousel Panel.
    .BodyCls("my-carousel")
    <style>
    .my-carousel {
        overflow-x: hidden !important;
    }
</style>
    Thank you. Never though of CSS fix! Please close.

Similar Threads

  1. [OPEN] [#160] GridPanel Scroll Bar does not move automatically when the column is dragged to the extreme right.
    By Tarun_Chand in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: Mar 11, 2013, 12:36 PM
  2. Grid Panel page size automatically increases
    By Vaishali in forum 1.x Help
    Replies: 1
    Last Post: Feb 22, 2012, 12:37 AM
  3. Display the Gridview's scroll-bar to reflect the total number of all records (not only the downloaded rows in datastore)
    By Nhím Hổ Báo in forum 1.x Help
    Replies: 1
    Last Post: Jan 08, 2012, 5:10 AM
  4. Multiselect and mouse wheel not keeping selections
    By jlosi in forum 1.x Help
    Replies: 0
    Last Post: Aug 20, 2010, 1:25 PM
  5. How to make second Panel in ConainerLayout stretch automatically?
    By dbassett74 in forum 1.x Help
    Replies: 2
    Last Post: Apr 23, 2009, 5:49 PM

Posting Permissions