[CLOSED] RemoteSort for buffered store

Page 5 of 5 FirstFirst ... 345
  1. #41
    For example, if the window can show 50 rows and there are total 500 rows, the scroller is 1/10 the height of the scroll bar in normal scenario.
    But in the buffered view, it may be 1/5 or more. I guess it is also related with the same reason above.
    I compared grid with 200 and 500 rows, buffered and not buffered, and scroll bar was the same for buffered and not buffered version
    Please provide test sample demonstrates the issue

    And I was also wondering if there is a way to make the buffer bigger (less on demand rendering) via some setting.
    I tried to set the page size much bigger than the actually data amount, it makes no difference.
    PagingScroller options manage this behaviour (that scrolller is added to VerticalScroller collection)
    Please investigate API docs
    http://docs.sencha.com/ext-js/4-1/#!...PagingScroller

    Pleasee see section 'Infinite Scrolling' in
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel
    Vladimir Shcheglov
    Sr. Developer
  2. #42
    You can reproduce the problem as long as your panel height is bigger enough.
    Please see the code below:

    <%@ Page Language="C#" %>
     
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
     
    <!DOCTYPE html>
     
     
    <html>
    <head id="Head1" runat="server">
        <title></title>
     
     
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                ResourceManager.GetInstance().RegisterBeforeClientInitScript("window._start = new Date().getTime();");
                 
                var data = new List<object>();
     
     
                for (int i = 0; i < 500; i++)
                {
                    data.Add(new { 
                        Group = i % 100,
                        Value1 = "1_" + i,
                        Value2 = "2_" + i,
                        Value3 = "3_" + i,
                        Value4 = "4_" + i,
                        Value5 = "5_" + i,
                        Value6 = "6_" + i,
                        Value7 = "7_" + i,
                        Value8 = "8_" + i,
                        Value9 = "9_" + i,
                        Value10 = "10_" + i,
                        Value11 = "11_" + i,
                        Value12 = "12_" + i,
                        Value13 = "13_" + i,
                        Value14 = "14_" + i,
                        Value15 = "15_" + i,
                        Value16 = "16_" + i,
                        Value17 = "17_" + i,
                        Value18 = "18_" + i,
                        Value19 = "19_" + i,
                        Value20 = "20_" + i,
                        Value21 = "21_" + i,
                        Value22 = "22_" + i,
                        Value23 = "23_" + i,
                        Value24 = "24_" + i,
                        Value25 = "25_" + i,
                        Value26 = "26_" + i,
                        Value27 = "27_" + i,
                        Value28 = "28_" + i,
                        Value29 = "29_" + i,
                        Value30 = "30_" + i
                    });
                }
     
     
                GridPanel1.GetStore().DataSource = data;
                GridPanel1.GetStore().DataBind();
            }
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
     
     
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Width="1024" Height="860"
                Title="Grid"
                >
                <Store>
                    <ext:Store ID="Store1" runat="server" GroupField="Group" PageSize="1000" >                  
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="Group" />
                                    <ext:ModelField Name="Value1" />
                                    <ext:ModelField Name="Value2" />
                                    <ext:ModelField Name="Value3" />
                                    <ext:ModelField Name="Value4" />
                                    <ext:ModelField Name="Value5" />
                                    <ext:ModelField Name="Value6" />
                                    <ext:ModelField Name="Value7" />
                                    <ext:ModelField Name="Value8" />
                                    <ext:ModelField Name="Value9" />
                                    <ext:ModelField Name="Value10" />
                                    <ext:ModelField Name="Value11" />
                                    <ext:ModelField Name="Value12" />
                                    <ext:ModelField Name="Value13" />
                                    <ext:ModelField Name="Value14" />
                                    <ext:ModelField Name="Value15" />
                                    <ext:ModelField Name="Value16" />
                                    <ext:ModelField Name="Value17" />
                                    <ext:ModelField Name="Value18" />
                                    <ext:ModelField Name="Value19" />
                                    <ext:ModelField Name="Value20" />
                                    <ext:ModelField Name="Value21" />
                                    <ext:ModelField Name="Value22" />
                                    <ext:ModelField Name="Value23" />
                                    <ext:ModelField Name="Value24" />
                                    <ext:ModelField Name="Value25" />
                                    <ext:ModelField Name="Value26" />
                                    <ext:ModelField Name="Value27" />
                                    <ext:ModelField Name="Value28" />
                                    <ext:ModelField Name="Value29" />
                                    <ext:ModelField Name="Value30" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Sorters>
                            <ext:DataSorter Property="Group" Direction="ASC" />
                        </Sorters>
                    </ext:Store>
                </Store>
                <VerticalScroller>
                        <ext:GridPagingScroller ID="GridPagingScroller1" runat="server" ActivePrefetch="false" />
                    </VerticalScroller>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
    		    <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="40" Sortable="false" />
                        <ext:Column ID="Column1" runat="server" Text="Group" DataIndex="Group" />
                        <ext:SummaryColumn ID="SummaryColumn1" runat="server" Text="Value1" DataIndex="Value1" SummaryType="Count" Flex="1" />
                        <ext:Column ID="Column2" runat="server" Text="Value2" DataIndex="Value2" Flex="1" />
                        <ext:Column ID="Column3" runat="server" Text="Value3" DataIndex="Value3" Flex="1" />
                        <ext:Column ID="Column4" runat="server" Text="Value4" DataIndex="Value4" Flex="1" />
                        <ext:Column ID="Column5" runat="server" Text="Value5" DataIndex="Value5" Flex="1" />
                        <ext:Column ID="Column6" runat="server" Text="Value6" DataIndex="Value6" Flex="1" />
                        <ext:Column ID="Column7" runat="server" Text="Value7" DataIndex="Value7" Flex="1" />
                        <ext:Column ID="Column8" runat="server" Text="Value8" DataIndex="Value8" Flex="1" />
                        <ext:Column ID="Column9" runat="server" Text="Value9" DataIndex="Value9" Flex="1" />
                        <ext:Column ID="Column10" runat="server" Text="Value10" DataIndex="Value10" Flex="1" />
                        <ext:Column ID="Column11" runat="server" Text="Value11" DataIndex="Value11" Flex="1" />
                        <ext:Column ID="Column12" runat="server" Text="Value12" DataIndex="Value12" Flex="1" />
                        <ext:Column ID="Column13" runat="server" Text="Value13" DataIndex="Value13" Flex="1" />
                        <ext:Column ID="Column14" runat="server" Text="Value14" DataIndex="Value14" Flex="1" />
                        <ext:Column ID="Column15" runat="server" Text="Value15" DataIndex="Value15" Flex="1" />
                        <ext:Column ID="Column16" runat="server" Text="Value16" DataIndex="Value16" Flex="1" />
                        <ext:Column ID="Column17" runat="server" Text="Value17" DataIndex="Value17" Flex="1" />
                        <ext:Column ID="Column18" runat="server" Text="Value18" DataIndex="Value18" Flex="1" />
                        <ext:Column ID="Column19" runat="server" Text="Value19" DataIndex="Value19" Flex="1" />
                        <ext:Column ID="Column20" runat="server" Text="Value20" DataIndex="Value20" Flex="1" />
                        <ext:Column ID="Column21" runat="server" Text="Value21" DataIndex="Value21" Flex="1" />
                        <ext:Column ID="Column22" runat="server" Text="Value22" DataIndex="Value22" Flex="1" />
                        <ext:Column ID="Column23" runat="server" Text="Value23" DataIndex="Value23" Flex="1" />
                        <ext:Column ID="Column24" runat="server" Text="Value24" DataIndex="Value24" Flex="1" />
                        <ext:Column ID="Column25" runat="server" Text="Value25" DataIndex="Value25" Flex="1" />
                        <ext:Column ID="Column26" runat="server" Text="Value26" DataIndex="Value26" Flex="1" />
                        <ext:Column ID="Column27" runat="server" Text="Value27" DataIndex="Value27" Flex="1" />
                        <ext:Column ID="Column28" runat="server" Text="Value28" DataIndex="Value28" Flex="1" />
                        <ext:Column ID="Column29" runat="server" Text="Value29" DataIndex="Value29" Flex="1" />
                        <ext:Column ID="Column30" runat="server" Text="Value30" DataIndex="Value30" Flex="1" />
                    </Columns>
                </ColumnModel>                       
                <Features>
                    <ext:GroupingSummary ID="GroupingView1" runat="server"  
                            HideGroupedHeader
                            ="false" EnableGroupingMenu="false"
                            GroupHeaderTpl='Group {[values.rows[0].data.Group]}' />
                    <ext:GridFilters runat="server" ID="GridFilters1"> 
                            <Filters>
                                <ext:StringFilter DataIndex='Value2' />   
                                <ext:StringFilter DataIndex='Value3' /> 
                                <ext:StringFilter DataIndex='Value4' /> 
                                <ext:StringFilter DataIndex='Value5' /> 
                                <ext:StringFilter DataIndex='Value6' />                                                     
                            </Filters>
                        </ext:GridFilters>
                </Features>
                <View>
                    <ext:GridView ID="GridView1" runat="server" TrackOver="false" >
                        <Listeners>                    
                            <%--<Refresh Handler="alert((new Date().getTime() - window._start).toString());" />--%>
                        </Listeners>
                    </ext:GridView>
                </View>                               
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #43
    I don't see significant difference in scroll bar height between buffered and not buffered version.
    Scrollbar height (thumb) is not regulated anywhere and if scroling works correctly (you able to scroll from top to bottom) then all ok
    Vladimir Shcheglov
    Sr. Developer
  4. #44
    It is significant in our app.
    Actually if you change the above code from Group = i % 100 to Group = i % 500 in Page_Load method, you can tell the big difference.
    As you said, the scrolling is working, but it is extremely slow.
    And I also tried LeadingBufferZone and TrailingBufferZone as you mentioned in previous post, it doesn't help the performance much.
  5. #45
    Scrollbar is not designed to show how much height exactly. It is designed for scrolling only

    In buffered case, scrolling height has approximated height because there are no all rendered elements (grid renderes part of data only), grid doesn't know how many groups will be rendered, rows can have different height and etc. Therefore grid is not able to determine exactly height

    If you able to scroll from top to bottom then I don't see any issue in scroll height

    As you said, the scrolling is working, but it is extremely slow.
    The performance depends from browser javascript engine also. Compare Chrome and IE performance. Rows are rendered during scrolling therefore if browser javascript enegine is slow then you will observe some delay
    Vladimir Shcheglov
    Sr. Developer
  6. #46
    If remove Grouping feature then scroll height will be the same because grid can calculate height correctly (total rows * apprx row height)
    When you use grouping then grid doesn't about groups count and its height

    Actually, Buffered option is not designed to work with Grouping (Sencha teams mentioned about it on own forum, and i was surprised that local buffering works with grouping)

    Therefore do not expect that height of scroll will be the same for buffered and non buffered version, the main goal to scroll
    Vladimir Shcheglov
    Sr. Developer
  7. #47
    I would consider it as a bug (because all records are presented in client side and summary is able to calculate correctly all values). We should fix the issue before final release
    The fix is committed to SVN
    Vladimir Shcheglov
    Sr. Developer
Page 5 of 5 FirstFirst ... 345

Similar Threads

  1. [CLOSED] Shared store with buffered grid
    By Justin_Wignall in forum 2.x Premium Help
    Replies: 4
    Last Post: Aug 05, 2012, 3:00 PM
  2. Replies: 0
    Last Post: Oct 08, 2011, 9:02 PM
  3. [CLOSED] GridPanel RemoteSort
    By Marcelo in forum 1.x Premium Help
    Replies: 2
    Last Post: Sep 28, 2011, 9:12 PM
  4. [CLOSED] ServerMapping and RemoteSort
    By Timothy in forum 1.x Premium Help
    Replies: 6
    Last Post: Dec 17, 2009, 1:12 PM
  5. [CLOSED] Buffered Grid View Scrolling
    By bethc in forum 1.x Premium Help
    Replies: 3
    Last Post: Dec 02, 2009, 8:29 AM

Tags for this Thread

Posting Permissions