Apr 03, 2012, 7:32 PM
[CLOSED] Infinite Scrolling Grid with GridFilter feature - JavaScript Error
Hello,
I have an infinite scrolling grid, similar to this example:
https://examples2.ext.net/#/GridPane...ling/Overview/
The JavaScript error I mention below happens ONLY when I try to use the scroll bars of the grid. The grid initially loads perfectly.
Here is the code (more or less):
When I leave that block of code in, however, I get the following JavaScript error in Chrome when I try to use the scroll bars of the grid:
Uncaught TypeError: Cannot read property 'params' of undefined
Ext.define.onBeforeLoadext.axd:76
fireext.axd:18
Ext.util.DirectObservable.continueFireEventext.axd :14
(anonymous function)ext.axd:18
Ext.util.DirectObservable.fireEventext.axd:13
(anonymous function)ext.axd:18
Ext.define.maskext.axd:18
Ext.define.doAttemptLoadext.axd:18
And in Firebug:
options is undefined
...(function(header){var filter=me.getFilter(header.dataIndex);header[filter&&filte...
When I remove the infinite scrolling functionality, the filters work perfectly.
Any ideas how I can get remote grid filters working with infinite scrolling?
Thank you.
I have an infinite scrolling grid, similar to this example:
https://examples2.ext.net/#/GridPane...ling/Overview/
The JavaScript error I mention below happens ONLY when I try to use the scroll bars of the grid. The grid initially loads perfectly.
Here is the code (more or less):
<script runat="server">
protected void Store_ReadData(object sender, StoreRefreshDataEventArgs e)
{
Store store = (Store)sender;
store.Data = BusinessLogic.GetContacts(e.Start, e.Limit);
e.Total = 14000;
}
</script>
<ext:Panel ID="pnlSearch" Region="West" Collapsible="true" Width="350" MinWidth="350" Split="true" Title="My Lists" Icon="Magnifier" runat="server" Layout="AnchorLayout">
<Items>
<ext:GridPanel
runat="server"
ID="grdSearch"
ClientIDMode="Static"
DisableSelection="true"
height="500"
>
<Store>
<ext:Store runat="server" ID="MyStore" Buffered="true" AutoLoad="false" RemoteSort="true" OnReadData="Store_ReadData" >
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:PageProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="OrgID" Type="Int" />
<ext:ModelField Name="ContactID" Type="Int" />
<ext:ModelField Name="OrgName" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="OrgName" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server" >
<Columns>
<ext:Column runat="server" ID="OrgID" Text="OrgID" DataIndex="OrgID" Width="50" ClientIDMode="Static" Sortable="true" />
<ext:Column runat="server" ID="ContactID" Text="ContactID" DataIndex="ContactID" Width="50" ClientIDMode="Static" Sortable="true" />
<ext:Column runat="server" ID="OrgName" Text="OrgName" DataIndex="OrgName" Flex="1" Sortable="true" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" TrackOver="false" />
</View>
<Features>
<ext:GridFilters ID="myFilters" runat="server" ClientIDMode="Static">
<Filters>
<ext:NumericFilter DataIndex="OrgID" />
<ext:NumericFilter DataIndex="ContactID" />
<ext:StringFilter DataIndex="OrgName" />
</Filters>
</ext:GridFilters>
</Features>
<Listeners>
<AfterRender Handler="var me = this; me.store.prefetch({start: 0, limit: 99, callback: function() { me.store.guaranteeRange(0, 49); }});" Delay="100" />
</Listeners>
</ext:GridPanel>
</Items>
</ext:Panel>
When I comment out this block:<ext:GridFilters ID="myFilters" runat="server" ClientIDMode="Static">
<Filters>
<ext:NumericFilter DataIndex="OrgID" />
<ext:NumericFilter DataIndex="ContactID" />
<ext:StringFilter DataIndex="OrgName" />
</Filters>
</ext:GridFilters>
Everything works perfectly.When I leave that block of code in, however, I get the following JavaScript error in Chrome when I try to use the scroll bars of the grid:
Uncaught TypeError: Cannot read property 'params' of undefined
Ext.define.onBeforeLoadext.axd:76
fireext.axd:18
Ext.util.DirectObservable.continueFireEventext.axd :14
(anonymous function)ext.axd:18
Ext.util.DirectObservable.fireEventext.axd:13
(anonymous function)ext.axd:18
Ext.define.maskext.axd:18
Ext.define.doAttemptLoadext.axd:18
And in Firebug:
options is undefined
...(function(header){var filter=me.getFilter(header.dataIndex);header[filter&&filte...
When I remove the infinite scrolling functionality, the filters work perfectly.
Any ideas how I can get remote grid filters working with infinite scrolling?
Thank you.
Last edited by Daniil; Apr 04, 2012 at 2:12 PM.
Reason: [CLOSED]