[CLOSED] DataView - screen jumping

  1. #1

    [CLOSED] DataView - screen jumping

    Hi,
    I have a viewport layout.
    The center region is a page loaded dynamically via Mode=Frame.
    In that page, I have a DataView that is longer than the height of the center region.
    When a user scrolls down to click a different one, the page jumps to the top.

    How can I stop that?

    Example here: http://screencast-o-matic.com/u/VrWY/ScreenJump
    ViewPort Def:
    <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
    Center Panel Def:
       <ext:Panel runat="server" Title="Valuation Summary" ID="pnlContent" Region="Center" Border="false" AutoScroll="true"     >
                   <TopBar>
                       <ext:Toolbar ID="Toolbar1" runat="server" Flat="true"   >
                    <Items> 
                          <ext:SplitButton ID="ccyBut" runat="server" Text="All" IconAlign="Right" Icon="World"> 
                            <Menu>
                                <ext:Menu ID="Menu1" runat="server">
                                    <Items>
                                        <ext:MenuItem ID="MenuItem1" runat="server" Text="All" Icon="World">
                                            <Listeners>
                                                <Click Handler="SaveFilterSelection('All');#{pnlContent}.getBody().App.ContentPlaceHolder1_hidControlTypeId.setValue(-1); #{pnlContent}.getBody().App.ContentPlaceHolder1_Store1.reload(); " />
                                            </Listeners>
                                        </ext:MenuItem>
                                        <ext:MenuItem ID="MenuItem5" runat="server" Text="Narrative" Icon="PageWhiteWord">
                                            <Listeners>
                                                  <Click Handler="SaveFilterSelection('Narrative');#{pnlContent}.getBody().App.ContentPlaceHolder1_hidControlTypeId.setValue(1); #{pnlContent}.getBody().App.ContentPlaceHolder1_Store1.reload(); " />
                                            </Listeners>
                                        </ext:MenuItem>
                                        <ext:MenuItem ID="MenuItem6" runat="server" Text="Fiscal" Icon="ChartBar">
                                            <Listeners>
                                                  <Click Handler="SaveFilterSelection('Fiscal');#{pnlContent}.getBody().App.ContentPlaceHolder1_hidControlTypeId.setValue(2); #{pnlContent}.getBody().App.ContentPlaceHolder1_Store1.reload(); " />
                                            </Listeners>
                                        </ext:MenuItem>
                                    </Items>
                                    <Listeners>
                                        <Click Handler="this.up('splitbutton').setText(menuItem.text);this.up('splitbutton').setIconCls(menuItem.iconCls);" />
                                    </Listeners>
                                </ext:Menu>
                            </Menu>
                        </ext:SplitButton>
    
    
                        <ext:Button ID="Button2" runat="server" Icon="BulletPlus" Text="Expand All">
                            <Listeners>
                                <Click Handler="ExpandAllSections(); #{pnlContent}.getBody().App.ContentPlaceHolder1_Dashboard.el.select('.group-header').removeCls('collapsed');" />
                            </Listeners>
                        </ext:Button> 
                        <ext:Button ID="Button4" runat="server" Icon="BulletMinus" Text="Collapse All">
                            <Listeners>
                                <Click Handler="SaveValuationSummaryState(''); #{pnlContent}.getBody().App.ContentPlaceHolder1_Dashboard.el.select('.group-header').addCls('collapsed');" />
                            </Listeners>
                        </ext:Button>
                        <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="30" />
                 <%--       <ext:DisplayField  runat="server" Html="<div class='item-wrap1_false' style='width:60px;height:18px;text-align:center;'> <b>Narrative</b></div><div class='item-wrap2_false' style='width:60px;height:18px;text-align:center;'> <b>Fiscal</b></div><div class='item-wrap1_true' style='width:60px;height:18px;text-align:center;'> <b>Read Only</b></div>" />
           --%>         </Items> 
                </ext:Toolbar>
                   </TopBar>
                    <LayoutConfig> 
                         <ext:BorderLayoutConfig ReserveScrollbar="true"  />  
                    </LayoutConfig>
                    <Loader ID="Loader1" runat="server" AutoLoad="true" Mode="Frame" RemoveAll="true" Url="/Sections/ValuationSummary.aspx" >
                        
                    </Loader>
                </ext:Panel>
    DataView Def (loaded in center )
      <ext:Panel
            ID="DashBoardPanel"
            runat="server"
            Cls="items-view"
            Flex="800"  
         Height="1900" 
            Border="false">
                                    <Items>
                <ext:DataView
                    ID="Dashboard"
                    runat="server" AutoDataBind="true"
                    SingleSelect="true"  
                    ItemSelector="div.group-header" LoadingText="Fetching Valuation Summary..." 
                    EmptyText="No Valuation Summary to display. Please select a company OR active quarter above.">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Proxy>
                                <ext:AjaxProxy Url="../Handler/GetSummaries.ashx">
                                    <ActionMethods Read="GET" />
                                    <Reader>
                                        <ext:JsonReader Root="result" TotalProperty="totalCount" />
                                    </Reader>
                                </ext:AjaxProxy>
                            </Proxy>
                            <Parameters>
                                <ext:StoreParameter Name="docId" Value="#{hidDocumentId}.getValue()" Mode="Raw" />
                                <ext:StoreParameter Name="portId" Value="#{hidPortfolioId}.getValue()" Mode="Raw" />
                                <ext:StoreParameter Name="contentType" Value="#{hidControlTypeId}.getValue()" Mode="Raw" />
                            </Parameters>
    
    
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Title" />
                                        <ext:ModelField Name="TitleClean" />
                                        <ext:ModelField Name="Items" Type="Object" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Listeners>
                                  <Load Handler="ReOpenGroups();" Delay="500" />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <Tpl ID="Tpl1" runat="server">
                        <Html>
                            <div id="items-ct" style="height: auto;">
                                    <tpl for=".">
                                        <div id="GRP_{TitleClean}" class="group-header collapsed"  >
                                            <h2><div onclick="KeepTrackOfGroups('{TitleClean}',$('#GRP_{TitleClean}').attr('class'));">{Title}</div></h2>
                                            <dl tabindex="{ContentId}">
                                                <tpl for="Items"> 
                                                        <div id="{Count}Card" class="item-wrap{ControlTypeId}_{ReadOnly}"  ondblclick="javascript:GoToLocation('{Label}','{HeaderLabel}',{ContentId},{ControlTypeId}, {FundId},{Count},{ReadOnly},'{ShortName}');" > 
                                                        <div class="imageStyle"> <img src="/image/contentType{ControlTypeId}{ReadOnly}.png" title="{ContentId}" /></div>
                                                        <div class="headerStyle">{HeaderLabel} {[IsMultiFund(values.ShortName,values.MultiFund)]} </div>
                                                         
                                                        <div class="dateStyle"  id="{ContentId}date{Count}">
                                                            <span class="dateStyle">
                                                                {[UpdateTimeLabel(values.ModifiedBy,values.ModifiedOn)]} 
                                                            </span>
                                                        </div>
                                                       <div id="htmlRev" class="quixClass{ControlTypeId}"  >  
                                                                        <tpl if="ContentId != -1">   
                                                                            <img src="/image/magnifier.png" onclick="javascript:PreviewContent( {ContentId},{ControlTypeId},'{HeaderLabel}',{Count});" title="Preview" style=" cursor: pointer;" /> &nbsp;&nbsp;
                                                                        </tpl> 
                                                                        <tpl if="HasNote!=0">  
                                                                            <img src="/image/note_go.png"   title="See Notes ({HasNote})"   onclick="javascript:GotoNote('{Label}','{HeaderLabel}',{ContentId}, {FundId},0,{Count});" style=" cursor: pointer;"/>    
                                                                        </tpl>
                                                                        <tpl if="HasNote == 0">  
                                                                              <img src="/image/note_add.png"  title="Add Note"  onclick="javascript:GotoNote('{Label}','{HeaderLabel}',{ContentId}, {FundId},1,{Count});" style=" cursor: pointer;"/> 
                                                                        </tpl>  
                                                                        <tpl if="ContentId != -1">   
                                                                            &nbsp;&nbsp;    <img src="/image/text_list_numbers.png" onclick="javascript:LoadVersion({ContentId},'{HeaderLabel}',{Count});" title="History" style=" cursor: pointer;" />  
                                                                        </tpl>  
                                                            </div>
                                                             
                                                        </div> 
                                                </tpl>
                                                <div style="clear:both" />
                                             </dl>
                                        </div>
                                    </tpl>
                                </div>
                        </Html>
                    </Tpl>
                    <Listeners>
                        <ItemClick Fn="itemClick" />
                        <Refresh Handler="this.el.select('.item-wrap').addClsOnOver('x-view-over');" Delay="100" />
                    </Listeners>
    
    
                </ext:DataView>
                
            </Items>
            
        </ext:Panel>
    Last edited by Daniil; Oct 29, 2013 at 12:59 PM. Reason: [CLOSED]
  2. #2
    Hello!

    Try to set AutoScroll to false from top Panel: pnlContent

    In my case works fine: http://screencast-o-matic.com/watch/cI6TcoVsLC

    What browser do you use?
  3. #3
    Quote Originally Posted by Baidaly View Post
    Hello!

    Try to set AutoScroll to false from top Panel: pnlContent

    In my case works fine: http://screencast-o-matic.com/watch/cI6TcoVsLC

    What browser do you use?
    IE 10, that didn't work, but I just put a viewpoint in the child page, and issue seems to have resolved! Love that ViewPort, what CSS does it spit out to make it so flexible?
  4. #4
    Quote Originally Posted by rthiney View Post
    IE 10, that didn't work, but I just put a viewpoint in the child page, and issue seems to have resolved! Love that ViewPort, what CSS does it spit out to make it so flexible?
    I think, it happened because the Viewport takes all available space on the page and in your case it removes unnecessary scroll bars.

    You can read more about Viewport here: http://docs.sencha.com/extjs/4.2.1/#...ainer.Viewport

Similar Threads

  1. Is Ext.NET already support for touch screen?
    By sky73rx3 in forum 1.x Help
    Replies: 1
    Last Post: Aug 03, 2016, 6:48 PM
  2. Replies: 1
    Last Post: Sep 25, 2013, 12:13 PM
  3. [CLOSED] DataView to DataView Drag and Drop
    By paulc in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 10, 2012, 9:19 PM
  4. Tab Screen Size
    By simonmicheal in forum 1.x Help
    Replies: 0
    Last Post: Oct 21, 2009, 3:00 PM
  5. Better to use a "page" for each "screen"?
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: Apr 22, 2009, 12:51 PM

Posting Permissions