Ext js error

  1. #1

    Ext js error

    Hi,

    In a web application with Ext.net I get an error related to Ext.js.
    The error appears after clicking a ext:imagebutton

    Uncaught TypeError: Cannot read property 'length' of undefined
    at ctor.hasRange (ext.axd?v=5.3.0:formatted:54869)
    at ctor.rangeCached (ext.axd?v=5.3.0:formatted:55347)
    at ctor.getRange (ext.axd?v=5.3.0:formatted:55089)
    at ctor.getAllRange (ext.axd?v=5.3.0:1040)
    at ctor.getRowsValues (ext.axd?v=5.3.0:1094)
    at constructor.fn (ext.axd?aec3b8873b7143cb99d22dfa36e3253d:2)
    at h (ext.axd?v=5.3.0:formatted:10059)
    at Object.elevate (ext.axd?v=5.3.0:formatted:2111)
    at c (ext.axd?v=5.3.0:formatted:4081)
    ext.axd?v=5.3.0:formatted:54869

    I tried to find the cause by removing parts of the code and found that the error is not coming when e ExtraParam

    <ext:ImageButton runat="server" ID="btnSave" 
        ImageUrl="~/images/save24.png" 
        Width="24" Height="24" 
        Cls="btn-custommedium" Scale="Medium"  MarginSpec="0 3 0 3" OnClientClick="onBeginProcessing();" >
        <DirectEvents> 
            <Click OnEvent="btnSave_onEventclick"  >
                <ExtraParams>
                    <ext:Parameter Name="GridData" Value="Ext.encode(#{gpAllocation}.getRowsValues({selectedOnly : false}))" Mode="Raw"  />
                </ExtraParams>
            </Click>
        </DirectEvents>
        <ToolTips><ext:ToolTip ID="btnSaveToolTip" runat="server" Html="Opslaan"></ext:ToolTip></ToolTips>
    </ext:ImageButton>
    On several other locations I also use the extraparams without any problem.
    May be it is related to the gridpanel.
    Any idea where I have to search?

    Hans Wapenaar
    Last edited by HansWapenaar; Jun 01, 2021 at 2:10 PM. Reason: title change
  2. #2
    Hi,

    I found what could cause the error. It is related to Buffered="true" in the Ext:Store. When this line is removed the error does not show up.
    Should I take out the buffered option? Or are there alternatives?


    <ext:GridPanel 
        ID="gpAllocation" 
        runat="server"
        Border="false"
        Header="true"
        HideHeaders="false"
        Width ="360"
        MaxWidth="360"
        Height="300"
        MinHeight="300" 
        MarginSpec="0 0 0 0"
        PaddingSpec="0 0 0 0"  
        Cls="x-grid-custom">
        <Store>
            <ext:Store ID="StoreAllocation"  runat="server" 
                Buffered="true"
                PageSize="200"
                TrailingBufferZone="10"
                LeadingBufferZone="10"
                RemoteSort="false"  >
                <Proxy>
                    <ext:JsonPProxy>
                        <Reader>
                            <ext:JsonReader RootProperty="allocation" />
                        </Reader>
                    </ext:JsonPProxy>
                </Proxy>
                <Model>
                <ext:Model ID="ModelAllocation" runat="server" IDProperty="id" >
                        <Fields>
                            <ext:ModelField  Name="type" Type="String" />
                            <ext:ModelField  Name="code" Type="String" />
                            <ext:ModelField  Name="naam" Type="String" />
                        </Fields>
                </ext:Model>
                </Model> 
            </ext:Store>
        </Store>
        <ColumnModel ForceFit="true" >
            <Columns>
                <ext:Column ID="coltype" runat="server" DataIndex="type" Text="type" Hidden="true" />
                <ext:Column ID="colcode" runat="server" DataIndex="code" Text="id" Hidden="true" Width="70"  />
                <ext:Column ID="colnaam" runat="server" DataIndex="naam" Text="naam" Hidden="false" Width="70"  />
                </Columns>
        </ColumnModel>
        <View>
            <ext:GridView runat="server" PreserveScrollOnRefresh="true"  />                    
        </View>
    </ext:GridPanel>
    Hans
  3. #3
    Hello Hans!

    Quote Originally Posted by HansWapenaar
    Should I take out the buffered option? Or are there alternatives?
    If your grid doesn't get more than, say, 1,000 records at once, I'd say it's safe to remove the buffered store setting. Even if your grid gets around 10,000 records it may be still pretty responsive without buffering, depending on what data is in the grid; simple grids without renderers and few columns should show just fine in low-end client computers of nowadays even with lots of rows.

    Can't really tell what's going on just by the few bits you shared (we'd need a full test case to tell you exactly what to do and what's going on), but it really looks like the problem is not with the Ext.encode(#{gpAllocation}.getRowsValues({selectedOnly : false})) code, that might not be able to get the full contents of the store if it is buffered. Yet, it is not clear what state the store needs to be in for this to result in the error you pointed.

    So, to put it simply, go with the "no-buffered" if your grid is responsive enough without it; if you require buffered I'd say the button's triggered code needs to be debugged to tell exactly why it happens and how to avoid id without disabling the buffer.

    Buffered store means it only loads a subset of data around the position the grid's view is in (the visible rows according to scroll position). That's why it makes it faster if there are a lot of records to display. A "dynamic paging grid" that loads records as we scroll instead of switching pages.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hi Fabricio,

    Thanks for you quick response.

    Due to other priorities this project has been on the shelf for more than 18 months.
    I found that in september 2019 we discussed this buffered store also. Then I switched from Ext.net 3.3 to 5.0 and had to replace the bufferedrenderer.

    https://forums.ext.net/showthread.ph...tive-Scrolling

    We are testing now and found this Ext.js error (probably not yet tested in 2019).

    Normally number of records should not exceed 5.000, but users can also run selections over 30.000 records. That is why I opted for the store with buffered data.


    When I look at the location of the error I think it has something to do with paging and its toolbar. Strange, because the buffering is to avoid paging. I will try to check whether a pagingtoolbar is required.

        hasRange: function(e, d) {
            var a = this
              , c = a.getPageFromRecordIndex(e)
              , b = a.getPageFromRecordIndex(d);
            for (; c <= b; c++) {
                if (!a.hasPage(c)) {
                    return !1
                }
            }
            return (b - 1) * a._pageSize + a.getPage(b).length > d
        }
    I found a similar issue on ext.js
    https://stackoverflow.com/questions/...-read-property

    But overriding a bufferedstore is a bit too complex for me.

    Hans
  5. #5
    Quote Originally Posted by HansWapenaar
    When I look at the location of the error I think it has something to do with paging and its toolbar. Strange, because the buffering is to avoid paging. I will try to check whether a pagingtoolbar is required.
    Hmmm this sounds strange, the code you pasted for the grid does not include any paging toolbar code.

    But if you think it is paging toolbar just because it has "references" to "paging", there's a "page" term used as the concept of the "window of data" it gets at a time; this "chunk" of data may be called "page" although there's no actual "page-by-page" navigation like the paging toolbar.

    Quote Originally Posted by HansWapenaar
    But overriding a bufferedstore is a bit too complex for me.
    You'd have a much better time debugging the client-side code if you add ScriptMode="Debug" and SourceFormatting="True" to your ext:ResourceManager declaration. It is still a good idea not to use it when you are not debugging client-side Ext.NET code to avoid rare cases where debug code works and non-debug one fails.

    Basically the problem with your 'save' approach is because all grid's data is simply not available on client-side. That's due to the fact you are getting them gradually from server as the grid is scrolled around. You shouldn't "batch save" in this case, but save records as you edit, so the server always brings fresh and up-to-date data. Else you are going to have all strange behavior when you added a record, scrolled out of its view, then scrolled back... It should not be impossible, but would require deep rework in the grid logic to deal with local "unsaved" records vs remote ones.

    Maybe in this case instead of in place grid editing, you are better off with a form (in a popup window, etc) to edit/add the record and, upon save, refresh the grid with the just added record straight from server.

    A requirement of in-place editing of various records and then saving the batch of choices doesn't seem to mingle well with a large dataset, unless you are willing to store all of it in the client at once, or develop something specific for that end.

    Hope this helps!

Similar Threads

  1. Replies: 7
    Last Post: Nov 18, 2014, 12:05 PM
  2. [CLOSED] Error in Ext.Net.MVC 2.5. GridPanel and TreeGrid Error.
    By pawangyanwali in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 28, 2014, 11:28 PM
  3. Replies: 3
    Last Post: Jul 20, 2012, 3:19 PM
  4. Replies: 4
    Last Post: Mar 30, 2012, 7:30 PM
  5. Error Coolite 0.8 and .Net 2.0
    By Martyrian in forum 1.x Help
    Replies: 4
    Last Post: Oct 04, 2009, 7:53 PM

Posting Permissions