PDA

View Full Version : [OPEN] [#308] FilterHeader and infinite scrolling



HansWapenaar
Jul 27, 2013, 10:24 AM
Hi,

I was working on filter headers in an application and after getting the latest release of Ext.Net I saw a new example of 'FilterHeader' in GridPanels.
I also found the option of infinite scrolling and was wondering whether these two options could be combined. Is that possible?

I tried something bij editing the example but got an error message:
'method filterBy is not supported'
It is in a line: return (me.snapshot || me.data).filterBy(fn, scope || me);


What I did:

Take FilterHeader\Overview\Default.aspx
Remove the pagingtoolbar.
Adjust the store (toke lines from example Infinite_Scrolling\Overview\Default.aspx:



<ext:Store runat="server" ID="Store1"
Buffered="true"
PageSize="200"
TrailingBufferZone="10"
LeadingBufferZone="10">


I removed the buttons from the example because there were directly error message about non supported 'getAttribute'.


So, the question is whether it is possible to add filterheaders to a store with infinite scrolling, and if so, what I am doing wrong?

Thanks, Hans

Vladimir
Jul 28, 2013, 10:02 AM
Please clarify do you need local or remote filtering?

Buffered option should be used if you need request a data in parts from the server (it is like paging, just paging is handled by scroller)
So, buffered option is server side paging therefore remote filtering can be used (you need to set Remote=true for FilterHeader and handle filtering on the server side like in FilterHeader\Remote\Default.aspx)

If you need local filtering and all data on the client then you need to use BufferedRenderer plugin (http://examples2.ext.net/#/GridPanel/Infinite_Scrolling/Buffered_Scrolling/) instead buffered option. In this case, local filtering in FilterHeader works fine



I removed the buttons from the example because there were directly error message about non supported 'getAttribute'.

Can you elaborate it? How we can reproduce it? Or it is reproduced with buffered store only and local filtering (it is incorrect combination)?

HansWapenaar
Jul 28, 2013, 2:31 PM
Hi Vladimir,

I will start with your last question.
I now adjusted the example of GridPanel/FilterHeader/Remote/Default.aspx

- removed the bottombar with the pagingtoolbar
- adjusted the store:


<ext:Store runat="server"
ID="Store1"
RemoteSort="true"
OnReadData="Store_ReadData"
Buffered="true"
PageSize="200"
TrailingBufferZone="10"
LeadingBufferZone="10" >


Then when I run the source code the gridpanel is shown in the browser but as soon as I move the mouse over a row an error appears:
'JavaScript runtime error: The property or method getAttribute is not supported by this object'.

Error shows in:

// ----- remove in the next release (start) ---- The github issue #264.
getRecord: function (node) {
var record;

node = this.getNode(node);
if (node) {
record = this.dataSource.data.get(node.getAttribute('data-recordId')); // this row is highlighted as error!
}

if (!record) {
record = this.callParent(arguments);
}

return record;
},

I use IE10 and downloaded the latest Ext.Net (SVN) yesterday morning.

It looks like it that filtering is working a long as I do not move the mouse over the records.

Thanks, Hans

Vladimir
Jul 28, 2013, 7:11 PM
Thanks for the report, the issue is not related with FilterHeader plugin but it is fixed in SVN. Please update and retest

HansWapenaar
Jul 28, 2013, 9:59 PM
Hi Vladimir,

I updated and retested.
The data is shown now in the gridpanel. I can also filter on company. For example filling in 'A' will result into al companies starting with an A. But when removing the filter I sometimes get the error:
Runtime-fout JavaScript: Ext.data.Store.getById(): getById called for ID that is not present in local cache

Sometimes means: when setting the filter, selecting a record by clicking on it and then removing the filter. When no record is selected, the filter is removed correctly. When a record is selected removing the filter generates the error.

When filling in a filter for the column price I sometimes get the following error:
Runtime-fout JavaScript: Ext.data.PageMap.getRange(): PageMap asked for range which it does not have

I cannot find any logic yet when this error appear and when it doesnot.

Hans

Vladimir
Jul 28, 2013, 10:17 PM
Thanks for your answer. I will try to reproduce the issue
Buffered functionality should be fixed in ExtJS 4.2.2

I will notify you if i will not able to reproduce the issue

HansWapenaar
Jul 29, 2013, 8:27 AM
Hi Vladimir,

When will ExtJS 4.2.2 be part of Ext.Net?

Is it correct that the version number of ExtJs that is used is written in ../premium/Ext.Net/App_Readme/Sencha.txt? (now: Ext JS 4.2 - JavaScript Library)

Hans

Daniil
Jul 29, 2013, 1:08 PM
When will ExtJS 4.2.2 be part of Ext.Net?


Shortly after it releases. Currently, it is not released and I didn't see any official time frame. However, I think it might be soon.



Is it correct that the version number of ExtJs that is used is written in ../premium/Ext.Net/App_Readme/Sencha.txt? (now: Ext JS 4.2 - JavaScript Library)


Yes, it is a way, but it doesn't specify 4.2.x which might be important.

As for our public releases the most solid way to determine underlying ExtJS version is:
http://www.ext.net/download/

You can find Ext.NET 2.2.0 (Includes Ext JS 4.2.0) there.

As for the SVN trunk. Running

Ext.getVersion()
in JavaScript console looks the quickest way to determine of underlying ExtJS version.

However, there were precedents when Sencha forgot update the things which are returned by the getVersion() method. So, if the ExtJS version is very critic to know for sure, the best way is to ask us.


Currently, the trunk uses ExtJS 4.2.1.

Vladimir
Jul 29, 2013, 8:27 PM
Hi

it seems it is known bug in ExtJS
http://www.sencha.com/forum/showthread.php?258739
http://www.sencha.com/forum/showthread.php?258397-4.2.0-RC-Selecting-a-grid-s-row-with-a-buffered-store-causes-a-JavaScript-error
http://www.sencha.com/forum/showthread.php?262118

At this moment, I can suggest to clear selection before filtering


<ext:FilterHeader runat="server" Remote="true">
<Listeners>
<BeforeFilter Handler="this.grid.getSelectionModel().deselectAll();" />
</Listeners>
</ext:FilterHeader>

It seems it prevents that js error

Daniil
Jul 30, 2013, 5:27 AM
Created an Issue to track the open Sencha bug.
https://github.com/extnet/Ext.NET/issues/308

HansWapenaar
Aug 01, 2013, 9:54 AM
Hi,

I tried the workaround.
That makes it work.

Unfortunately every now and then I get the following error (in the adjusted ext.net example):

Runtime-fout JavaScript: Ext.data.PageMap.getRange(): PageMap asked for range which it does not have

Error:
source class: "Ext.data.PageMap"
source method: "getRange"

Difficult to say when it occurs. Several times the error showed up after removing a filter on 'price' for the first or second time.

Thanks,
Hans

Vladimir
Aug 01, 2013, 10:10 AM
Can you post full stack trace for the error? You can get it from VS debugger

HansWapenaar
Aug 01, 2013, 11:01 AM
Hi Vladimir,

I do not see any stack trace.
I made a screen dump of the error that is generated in an ext.axd?... file.

Is that of any use?

Hans

Vladimir
Aug 01, 2013, 11:37 AM
Stack is in bottom left corner of your screenshot
Try the following override
http://www.sencha.com/forum/showthread.php?263392-Two-Infinite-Scrolling-grids-PageMap-error&p=978901&viewfull=1#post978901

HansWapenaar
Aug 01, 2013, 12:31 PM
Ok,

I tested again and did not get the error. The override script seems to work.

But when testing I also clicked on one of the headers after selecting a record. This sort function generated the same error that we had earlier.
'Runtime-fout JavaScript: Ext.data.Store.getById(): getById called for ID that is not present in local cache'.


I tried to put 'deselectAll' in the SortChange listener but that handler comes probably too late. I has no effect on the error.



<Listeners>
<SortChange Handler="this.getSelectionModel().deselectAll();" />
</Listeners>




Hans

Vladimir
Aug 01, 2013, 10:20 PM
Try to add the following code to the grid


<View>
<ext:GridView runat="server">
<Listeners>
<BeforeRefresh Handler="this.panel.getSelectionModel().deselectAll();" />
</Listeners>
</ext:GridView>
</View>


What about to forbid selection at all for grid with buffered store (DisableSelection="true" for the grid)? It seems ExtJs has many bugs with buffered and selection (we have to wait till Sencha fix it)

HansWapenaar
Aug 05, 2013, 10:56 AM
Hi Vladimir,

Adding the view solves the problem with sorting.
So it looks like that all I initially wanted is working now.

Forbidding selections on the grid is not really an option. I am using the grid to make multi-selection in the grid and use the 'drag and drop' functionality to drop the selected records in a map.

So I go on with what I have got so far. Test it a bit more (hopefully no more errors). And when the new Sencha ExtJs is incorporated in Ext.Net adjust my source code.


Thanks, Hans