[CLOSED] Scrolling issues

  1. #1

    [CLOSED] Scrolling issues

    Hi,

    Just wondering what the easiest layout and configuration to enable scrolling in a panel. I have the configuration below but if you resize the browser it does not revel any scroll bar at all even though autoscroll is set to true. I want the content of the west tabs, the center tabs and the south panels to be scrollable when the window is resized but that is not happening with the code below. What is the problem with the configuration.

    <%@ 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.Store.Primary;
                    store.DataSource = new object[]
                                {
                                new object[] {"A", "test121", "test131"},              
                                new object[] {"A", "test422", "test132"},               
                                new object[] {"A", "test123", "test133"},               
                                new object[] {"B", "test421", "test231"},               
                                new object[] {"B", "test222", "test232"},               
                                new object[] {"B", "test223", "test233"},               
                                new object[] {"C", "test321", "test331"},                
                                new object[] {"C", "test922", "test332"},                
                                new object[] {"C", "test323", "test333"}
                                };
                    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 id="Head1" runat="server">  
        <title>Ext.Net Example</title>  
         <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />  
          <script src="../../Scripts/Test.js" type="text/javascript"></script>     
        </head><body>   
        <form id="Form1" runat="server">    
        <ext:ResourceManager ID="ResourceManager1" runat="server" />   
           <ext:Viewport ID="Viewport1" runat="server" Layout="Border" AutoScroll="true">
        <Items>
          <ext:Panel   runat="server" Region="Center" Layout="Border" LabelAlign="Top" AutoScroll="true">
            <TopBar>
               <ext:Toolbar runat="server">
                  <Items>
                   <ext:Button ID="btnApplyObjectpermissions" runat="server"   Text="Apply" 
                      AnchorHorizontal="100%" Disabled="True">
                   </ext:Button>
                    <ext:ToolbarSeparator />
                   <ext:Button ID="btnResetObjectpermissions" runat="server" Text="Reset"
                    AnchorHorizontal="100%" Disabled="True">
                   </ext:Button>  
                  </Items>
               </ext:Toolbar>
            </TopBar>         
            <Items>
           
           
            <ext:Panel runat="server" Region="West" width="200" Title="West" Layout="fit" AutoScroll="true"  >
                <Items>
                    <ext:TabPanel runat="server">
                        <Items>
                            <ext:Panel runat="server" Title="tab 1"/>
                              <ext:Panel runat="server" Title="tab 1"/>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Panel>       
                <ext:Panel runat="server" Region="center"  Title="center" Layout="BorderLayout" AutoScroll="true" >
                     <Items>          
                          <ext:Panel  runat="server" Region="center" width="200" Layout="fit"  >
                                <Items>
                                    <ext:TabPanel  runat="server">
                                        <Items>
                                            <ext:Panel  runat="server" Title="tab 3" layout="FormLayout">
                                                <Items>
                                                    <ext:Panel runat="server" Height="40">
                                                        <Items>
                                                           <ext:Label  runat="server" Text="A very long descriptions needs to be  scrollable"></ext:Label>
                                                        </Items>
                                                     </ext:Panel>
                                                     <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">       
                                                        <Store>          
                                                         <ext:Store ID="Store1" runat="server">  
                                                         <Reader>                   
                                                             <ext:ArrayReader>                    
                                                                <Fields>                           
                                                                      <Ext:RecordField Name="test1" Type="String" />  
                                                                       <Ext:RecordField Name="test2" Type="String"/>                    
                                                                      <Ext:RecordField Name="test3" />          
                                                                </Fields>                   
                                                            </ext:ArrayReader>   
                                                        </Reader>    
                                                         <SortInfo Field="test2" Direction="DESC" />
                                                        </ext:Store>   
                                                        </Store>      
                                                          <ColumnModel ID="ColumnModel1" runat="server">  
                                                                <Columns>             
                                                                <ext:Column Header="Test1" DataIndex="test1" /> 
                                                                <ext:Column Header="Test2" DataIndex="test2" /> 
                                                                <ext:Column Header="Test3" DataIndex="test3" />
                                                                </Columns>        
                                                                </ColumnModel>        
                                                            <View>           
                                                            <ext:GroupingView ID="GroupingView1" runat="server" />       
                                                            </View>    
                                                        </ext:GridPanel> 
                                                </Items>
                                            </ext:Panel>
                                              <ext:Panel  runat="server" Title="tab 4"/>
                                        </Items>
                                    </ext:TabPanel>
                                </Items>
                        </ext:Panel>
                        <ext:Panel  runat="server" Region="South" Title="south" Height="45" AutoScroll="true" >
            <Items>
                            <ext:ColumnLayout runat="server" Split="false">
                                <Columns>
                                    <ext:LayoutColumn ColumnWidth="0.25">
                                        <ext:Panel   runat="server" Border="false" Height="24">
                                            <Items>
                                                <ext:Label ID="lbselectedObjectpermissions" runat="server"  Text="selected"
                                                   AutoDataBind="true" >
                                                </ext:Label>
                                            </Items>
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                     <ext:LayoutColumn ColumnWidth="0.25">
                                        <ext:Panel   runat="server" Border="false" Height="24">
                                            <Items>
                                                <ext:Label ID="lbnotselectedObjectpermissions" runat="server"  Text="selected "
                                                   AutoDataBind="true">
                                                </ext:Label>
                                            </Items>
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                     
                                     <ext:LayoutColumn ColumnWidth="0.25">
                                        <ext:Panel runat="server" Border="false" Height="24">
                                            <Items>
                                                <ext:Label  ID="lbmixedselectedObjectpermissions" runat="server"   Text="mixedselected "
                                                  AutoDataBind="true">
                                                </ext:Label>
                                            </Items>
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                    <ext:LayoutColumn ColumnWidth="0.17">
                                     <ext:Panel runat="server" Border="false" Height="24">
                                            <Items>
                                                <ext:Label  ID="lbaccessdenyObjectpermissions" runat="server"  Text="Access denied"
                                                   AutoDataBind="true">
                                                </ext:Label>
                                            </Items>
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                </Columns>
                            </ext:ColumnLayout>
                        </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>      
            </ext:Panel>
            </Items>
            </ext:Viewport>
    
        </form>
        </body>
        </html>
    Last edited by geoffrey.mcgill; Sep 12, 2011 at 12:03 AM. Reason: [CLOSED]
  2. #2
    Hi,

    1.ViewPort is not scroolable widget
    2. AutoScroll cannot be used if panel uses layouts: Fit and Border

    I modified your sample to add scrolling and removed some unrequired properties

    <%@ 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.Store.Primary;
                store.DataSource = new object[]
                                {
                                new object[] {"A", "test121", "test131"},              
                                new object[] {"A", "test422", "test132"},               
                                new object[] {"A", "test123", "test133"},               
                                new object[] {"B", "test421", "test231"},               
                                new object[] {"B", "test222", "test232"},               
                                new object[] {"B", "test223", "test233"},               
                                new object[] {"C", "test321", "test331"},                
                                new object[] {"C", "test922", "test332"},                
                                new object[] {"C", "test323", "test333"}
                                };
                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 id="Head1" runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
            <Items>
                <ext:Panel runat="server" Layout="Border">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button ID="btnApplyObjectpermissions" runat="server" Text="Apply" Disabled="True">
                                </ext:Button>
                                <ext:ToolbarSeparator />
                                <ext:Button ID="btnResetObjectpermissions" runat="server" Text="Reset" Disabled="True">
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Items>
                        <ext:Panel runat="server" Region="West" Width="200" Title="West" Layout="fit">
                            <Items>
                                <ext:TabPanel runat="server">
                                    <Items>
                                        <ext:Panel runat="server" Title="tab 1" />
                                        <ext:Panel runat="server" Title="tab 1" />
                                    </Items>
                                </ext:TabPanel>
                            </Items>
                        </ext:Panel>
                        <ext:Panel runat="server" Region="center" Title="center" Layout="BorderLayout">
                            <Items>
                                <ext:Panel runat="server" Region="center" Width="200" Layout="fit">
                                    <Items>
                                        <ext:TabPanel runat="server">
                                            <Items>
                                                <ext:Panel runat="server" Title="tab 3" AutoScroll="true">
                                                    <Items>
                                                        <ext:Panel runat="server" Height="40">
                                                            <Items>
                                                                <ext:Label runat="server" Text="A very long descriptions needs to be  scrollable">
                                                                </ext:Label>
                                                            </Items>
                                                        </ext:Panel>
                                                        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                                                            <Store>
                                                                <ext:Store ID="Store1" runat="server">
                                                                    <Reader>
                                                                        <ext:ArrayReader>
                                                                            <Fields>
                                                                                <ext:RecordField Name="test1" Type="String" />
                                                                                <ext:RecordField Name="test2" Type="String" />
                                                                                <ext:RecordField Name="test3" />
                                                                            </Fields>
                                                                        </ext:ArrayReader>
                                                                    </Reader>
                                                                    <SortInfo Field="test2" Direction="DESC" />
                                                                </ext:Store>
                                                            </Store>
                                                            <ColumnModel ID="ColumnModel1" runat="server">
                                                                <Columns>
                                                                    <ext:Column Header="Test1" DataIndex="test1" />
                                                                    <ext:Column Header="Test2" DataIndex="test2" />
                                                                    <ext:Column Header="Test3" DataIndex="test3" />
                                                                </Columns>
                                                            </ColumnModel>
                                                            <View>
                                                                <ext:GroupingView ID="GroupingView1" runat="server" />
                                                            </View>
                                                        </ext:GridPanel>
                                                    </Items>
                                                </ext:Panel>
                                                <ext:Panel runat="server" Title="tab 4" />
                                            </Items>
                                        </ext:TabPanel>
                                    </Items>
                                </ext:Panel>
                                <ext:Panel runat="server" Region="South" Title="south" Height="45">
                                    <Items>
                                        <ext:Panel runat="server" Border="false" Height="24" ColumnWidth="0.25">
                                            <Items>
                                                <ext:Label ID="lbselectedObjectpermissions" runat="server" Text="selected" AutoDataBind="true">
                                                </ext:Label>
                                            </Items>
                                        </ext:Panel>
                                        
                                        <ext:Panel runat="server" Border="false" Height="24" ColumnWidth="0.25">
                                            <Items>
                                                <ext:Label ID="lbnotselectedObjectpermissions" runat="server" Text="selected " AutoDataBind="true">
                                                </ext:Label>
                                            </Items>
                                        </ext:Panel>
                                        
                                        <ext:Panel runat="server" Border="false" Height="24" ColumnWidth="0.25">
                                            <Items>
                                                <ext:Label ID="lbmixedselectedObjectpermissions" runat="server" Text="mixedselected "
                                                    AutoDataBind="true">
                                                </ext:Label>
                                            </Items>
                                        </ext:Panel>
                                        
                                        <ext:Panel runat="server" Border="false" Height="24" ColumnWidth="0.17">
                                            <Items>
                                                <ext:Label ID="lbaccessdenyObjectpermissions" runat="server" Text="Access denied"
                                                    AutoDataBind="true">
                                                </ext:Label>
                                            </Items>
                                        </ext:Panel>
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  3. #3
    Thanks for your response .

    Now I understand I cannot use border and Fit layout for scrolling. How can I modify the code so that the west panel content and the south panel content become scrollable. Or is that not possible.

    What other layout can I use to replace viewport so that I can achieve scrolling within the main area that is now handled by the ViewPort.

    Also I noticed that the change you made enable scrolling for the tab in the center panel and the horizontal scrollbar does not show. How can that be fixed?

    Regards
  4. #4
    Also I noticed that the change you made enable scrolling for the tab in the center panel and the horizontal scrollbar does not show. How can that be fixed?
    Horizontal scrolling is not showing because you did not set width for the panel

    How can I modify the code so that the west panel content and the south panel content become scrollable.
    You can set AutoScroll for each tab if need independ scrolling for each tab or remove Layout="Fit" for west region and set AutoScroll for that region

    What other layout can I use to replace viewport so that I can achieve scrolling within the main area that is now handled by the ViewPort.
    You just should understand that scrolling is possible if content size exceeds its container size.
    So, if you need to scroll main area then ViewPort is not required at all because ViewPort never exceeds browser area
  5. #5
    Quote Originally Posted by Vladimir View Post
    Horizontal scrolling is not showing because you did not set width for the panel
    Setting the width for the panel did not do anything I still do not see any horizontal srollbar

    <ext:TabPanel ID="TabPanel2"  runat="server">
                                        <Items>
                                            <ext:Panel ID="Panel7"  runat="server" Title="tab 3"  AutoScroll="true" Width="400" >
                                                <Items>
                                                    <ext:Panel ID="Panel8" runat="server" Height="40">
                                                        <Items>
                                                           <ext:Label ID="Label1"  runat="server" Text="A very long descriptions needs to be  scrollable"></ext:Label>
                                                        </Items>
                                                     </ext:Panel>
                                                     <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">      
                                                        <Store>         
                                                         <ext:Store ID="Store1" runat="server"> 
                                                         <Reader>                  
                                                             <ext:ArrayReader>                   
                                                                <Fields>                          
                                                                      <Ext:RecordField Name="test1" Type="String" /> 
                                                                       <Ext:RecordField Name="test2" Type="String"/>                   
                                                                      <Ext:RecordField Name="test3" />         
                                                                </Fields>                  
                                                            </ext:ArrayReader>  
                                                        </Reader>   
                                                         <SortInfo Field="test2" Direction="DESC" />
                                                        </ext:Store>  
                                                        </Store>     
                                                          <ColumnModel ID="ColumnModel1" runat="server"> 
                                                                <Columns>            
                                                                <ext:Column Header="Test1" DataIndex="test1" />
                                                                <ext:Column Header="Test2" DataIndex="test2" />
                                                                <ext:Column Header="Test3" DataIndex="test3" />
                                                                </Columns>       
                                                                </ColumnModel>       
                                                            <View>          
                                                            <ext:GroupingView ID="GroupingView1" runat="server" />      
                                                            </View>   
                                                        </ext:GridPanel>
                                                </Items>
                                            </ext:Panel>
                                              <ext:Panel ID="Panel9"  runat="server" Title="tab 4"/>
                                        </Items>
                                    </ext:TabPanel>
  6. #6
    Sorry, I meant width for the grid or the panel with long description
  7. #7
    setting the width of the grid shows the horizontal scroll. But I do not want to set the width statically as it does not look nice in design. I tried minWidth property and that did not work. Whats the purpose of minWidth property. Can it be used in this scenerio
  8. #8
    MinWidth is used when width is changed manually or by layout
    See how you can use it

    - set Layout="AnchorLayout" for tab
    - set MinWidth="500" AnchorHorizontal="100%" for items (panel and grid)
    <ext:Panel runat="server" Title="tab 3" AutoScroll="true" Layout="AnchorLayout">
                                                    <Items>
                                                        <ext:Panel runat="server" Height="40" MinWidth="500" AnchorHorizontal="100%">
                                                            <Items>
                                                                <ext:Label runat="server" Text="A very long descriptions needs to be  scrollable">
                                                                </ext:Label>
                                                            </Items>
                                                        </ext:Panel>
                                                        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" MinWidth="500" AnchorHorizontal="100%">
  9. #9
    Thanks the anchor layout is the real layout i am looking for. But i have the following issues.

    I set the viewport to use the anchor layout and enabled auto scrolling the scrolling works but the topbar does not refresh if i resize the window bigger the right hand part is white as the theme does not go all the way. I am doing layout on the viewport resize event as shown below How can this be resolved

    Also
    when the horizontal scroll is scrolled to the right, the Right panel is white as well as shown in the attached images

    <ext:Viewport ID="Viewport1" runat="server" Layout="anchorLayout" AutoScroll="true" AutoHeight="true" StyleSpec="position:relative;">
         <Listeners>
                <Resize  Handler="try { Viewport1.doLayout();} catch (e) {}"/>
            </Listeners>
        <Items>
          <ext:Panel ID="Panel1"  runat="server" Layout="Border" LabelAlign="Top" AutoScroll="true" MinWidth="800" AnchorHorizontal="right" AnchorVertical="100%"  MinHeight="700" >
            <TopBar>
               <ext:Toolbar runat="server">
                  <Items>
                   <ext:Button ID="btnApplyObjectpermissions" runat="server"   Text="Apply"
                       Disabled="True">
                   </ext:Button>
                    <ext:ToolbarSeparator />
                   <ext:Button ID="btnResetObjectpermissions" runat="server" Text="Reset"
                   Disabled="True">
                   </ext:Button> 
                  </Items>
               </ext:Toolbar>
            </TopBar>        
            <Items>
    Attached Thumbnails Click image for larger version. 

Name:	horizontal scroll.PNG 
Views:	70 
Size:	26.7 KB 
ID:	3143   Click image for larger version. 

Name:	topbarRefresh Issue.PNG 
Views:	55 
Size:	38.9 KB 
ID:	3144  
  10. #10
    As I mentioned before, ViewPort doesn't support scrolling
    AutoHeight is not supported also because ViewPort always fit to browser page

Similar Threads

  1. [CLOSED] Infinite Scrolling with MVC
    By RCN in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Apr 12, 2012, 6:27 PM
  2. [CLOSED] Infinite Scrolling
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 09, 2011, 6:15 PM
  3. [CLOSED] Tab Content Scrolling
    By rcaunt in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 02, 2009, 1:21 PM
  4. [CLOSED] Scrolling Menu
    By mjessup in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 20, 2009, 3:10 AM
  5. [CLOSED] Tab Scrolling
    By Immobilmente in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Dec 23, 2008, 5:09 PM

Posting Permissions