PDA

View Full Version : [CLOSED] filterheader, infinite scrolling and a component to show a record count



HansWapenaar
Aug 04, 2014, 5:56 PM
Hi,

I'm applying filterheader, infinite scrolling and a record-count component to a gridpanel.
I also tested this on the example: http://examples2.ext.net/#/GridPanel/FilterHeader/Overview/

First applying the component to count records:
Add to the items in the toolbar:


<ext:Component ID="status"
runat="server"
ItemID="status">
<Tpl ID="Tpl1" runat="server" >
<Html>
{count} records
</Html>
</Tpl>
</ext:Component>


And a listener to the store (also add ID to gridpanel: gridpanel):



<Listeners>
<DataChanged Handler="#{gridpanel}.down('#status').update({ count: this.getTotalCount() });" />
</Listeners>


This works fine: when applying a filter the amount of filtered records is shown.

Next step: removing the pagingToolbar and adding a buffered renderer in the plugin section.



<Plugins>
<ext:FilterHeader runat="server" ID="filterheader" OnCreateFilterableField="OnCreateFilterableField" />
<ext:BufferedRenderer ID="BufferedRenderer1" runat="server" />
</Plugins>


Result: the total amount of rows is shown. Also when the data is filtered.

What is missing? How do I get the amount of filtered rows instead of the total amount? And why is it working when paging is used?

Hans

HansWapenaar
Aug 05, 2014, 8:07 AM
Hi,

I replaced this.getTotalCount() by this.getCount() and the results are displayed as they should be.
So my problem is solved.

However, it remains strange that getTotalCount() gives the filtered amount when a pagingToolbar is used and the total amount when infinite scrolling is used even when the data is filtered.


Hans

HansWapenaar
Aug 05, 2014, 8:32 AM
Hi,

Documentation ExtJs/Sencha:

getTotalCount( ) : Number
Returns the total number of Model instances that the Proxy indicates exist. This will usually differ from getCount when using paging - getCount returns the number of records loaded into the Store at the moment, getTotalCount returns the number of records that could be loaded into the Store if the Store contained all data

It looks like it is just the other way around: getTotalCount differs from getCount when not using paging.

Hans

Daniil
Aug 05, 2014, 12:47 PM
Hi Hans,


However, it remains strange that getTotalCount() gives the filtered amount when a pagingToolbar is used

Could you, please, provide a test case to reproduce it?

HansWapenaar
Aug 07, 2014, 7:56 AM
Hi Daniil,

I adjusted the example http://examples2.ext.net/#/GridPanel/FilterHeader/Overview/
First code block is with pagingToolbar
Second code block is with infinite scrolling.

Try 'load filters' and check what the record count is in lower left corner.
When you replace in the second code block getTotalCount() with getCount() the counter is ok.







<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = FiltersTestData.Data;
this.Store1.DataBind();
}
}

protected Field OnCreateFilterableField(object sender, ColumnBase column, Field defaultField)
{
if(column.DataIndex == "Id")
{
((TextField)defaultField).Icon = Icon.Magnifier;
}

return defaultField;
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>FilterHeader plugin overview - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var loadFilter = function (plugin) {
plugin.setValue({
Id : ">5",
Company: "!Inc.",
Price: ">50<70",
Visible: 1
});
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>FilterHeader plugin overview</h1>

<p>FilterHeader plugin allows use the following operators:</p>

<ul>
<li>String: =(equals), +(starts with), -(ends with), *(contains), !(doesn't contain)</li>
<li>Date: >, <, >=, <= or date for equals</li>
<li>Number: >, <, >=, <= or date for equals</li>
<li>Boolean: 1, 0, true, false</li>
</ul>

<ext:Window
ID="Window1"
runat="server"
Width="800"
Height="400"
Closable="false"
Title="Example"
Maximizable="true"
Layout="Fit">
<Items>
<ext:GridPanel runat="server" ID="gridpanel">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="10">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Company" Type="String" />
<ext:ModelField Name="Price" Type="Float" />
<ext:ModelField Name="Date" Type="Date" />
<ext:ModelField Name="Size" Type="String" />
<ext:ModelField Name="Visible" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Company" Direction="ASC" />
</Sorters>
<Listeners>
<DataChanged Handler="#{gridpanel}.down('#status').update({ count: this.getTotalCount() });" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="ID" DataIndex="Id" />
<ext:Column runat="server" Text="Company" DataIndex="Company" Flex="1" />
<ext:Column runat="server" Text="Price" DataIndex="Price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:DateColumn runat="server" Text="Date" DataIndex="Date" Align="Center" Format="yyyy-MM-dd" />
<ext:Column runat="server" Text="Size" DataIndex="Size" />
<ext:Column runat="server" Text="Visible" DataIndex="Visible" Align="Center">
<Renderer Handler="return (value) ? 'Yes':'No';" />
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:FilterHeader runat="server" ID="filterheader" OnCreateFilterableField="OnCreateFilterableField" />
</Plugins>
<BottomBar>
<ext:PagingToolbar runat="server" HideRefresh="True">
</ext:PagingToolbar>
</BottomBar>
<DockedItems>
<ext:Toolbar runat="server" Dock="Bottom">
<Items>
<ext:Component ID="status"
runat="server"
ItemID="status">
<Tpl ID="Tpl1" runat="server" >
<Html>
{count} records
</Html>
</Tpl>
</ext:Component>
<ext:Button
runat="server"
Text="Case Sensitive"
EnableToggle="true"
AllowDepress="true"
ToggleHandler="var plugin = this.up('grid').filterHeader; plugin.caseSensitive = this.pressed; plugin.applyFilter();"
/>
<ext:Button
runat="server"
Text="Load Filters"
Handler="loadFilter(this.up('grid').filterHeader);"
/>
<ext:Button
runat="server"
Text="Get Fields Values"
ToolTip="Get Values of Fields"
Handler="var values = Ext.encode(this.up('grid').filterHeader.getValue() ); Ext.Msg.alert('Fields Values', values);"
/>
<ext:Button
runat="server"
Text="Get Filter Values"
ToolTip="Get Filter Values of Grid"
Handler="var filters = Ext.encode(this.up('grid').filterHeader.getFilterV alues()); Ext.Msg.alert('Filter Values', filters);"
/>
<ext:Button
runat="server"
Text="Clear Filters"
Handler="this.up('grid').filterHeader.clearFilter();"
/>
</Items>
</ext:Toolbar>
</DockedItems>
</ext:GridPanel>
</Items>
</ext:Window>
</form>
</body>
</html>


Second code block:



<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = FiltersTestData.Data;
this.Store1.DataBind();
}
}

protected Field OnCreateFilterableField(object sender, ColumnBase column, Field defaultField)
{
if(column.DataIndex == "Id")
{
((TextField)defaultField).Icon = Icon.Magnifier;
}

return defaultField;
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>FilterHeader plugin overview - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var loadFilter = function (plugin) {
plugin.setValue({
Id : ">5",
Company: "!Inc.",
Price: ">50<70",
Visible: 1
});
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>FilterHeader plugin overview</h1>

<p>FilterHeader plugin allows use the following operators:</p>

<ul>
<li>String: =(equals), +(starts with), -(ends with), *(contains), !(doesn't contain)</li>
<li>Date: >, <, >=, <= or date for equals</li>
<li>Number: >, <, >=, <= or date for equals</li>
<li>Boolean: 1, 0, true, false</li>
</ul>

<ext:Window
ID="Window1"
runat="server"
Width="800"
Height="400"
Closable="false"
Title="Example"
Maximizable="true"
Layout="Fit">
<Items>
<ext:GridPanel runat="server" ID="gridpanel">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="10">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Company" Type="String" />
<ext:ModelField Name="Price" Type="Float" />
<ext:ModelField Name="Date" Type="Date" />
<ext:ModelField Name="Size" Type="String" />
<ext:ModelField Name="Visible" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Company" Direction="ASC" />
</Sorters>
<Listeners>
<DataChanged Handler="#{gridpanel}.down('#status').update({ count: this.getTotalCount() });" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="ID" DataIndex="Id" />
<ext:Column runat="server" Text="Company" DataIndex="Company" Flex="1" />
<ext:Column runat="server" Text="Price" DataIndex="Price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:DateColumn runat="server" Text="Date" DataIndex="Date" Align="Center" Format="yyyy-MM-dd" />
<ext:Column runat="server" Text="Size" DataIndex="Size" />
<ext:Column runat="server" Text="Visible" DataIndex="Visible" Align="Center">
<Renderer Handler="return (value) ? 'Yes':'No';" />
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:FilterHeader runat="server" ID="filterheader" OnCreateFilterableField="OnCreateFilterableField" />
<ext:BufferedRenderer ID="BufferedRenderer1" runat="server" />
</Plugins>
<BottomBar>
</BottomBar>
<DockedItems>
<ext:Toolbar runat="server" Dock="Bottom">
<Items>
<ext:Component ID="status"
runat="server"
ItemID="status">
<Tpl ID="Tpl1" runat="server" >
<Html>
{count} records
</Html>
</Tpl>
</ext:Component>
<ext:Button
runat="server"
Text="Case Sensitive"
EnableToggle="true"
AllowDepress="true"
ToggleHandler="var plugin = this.up('grid').filterHeader; plugin.caseSensitive = this.pressed; plugin.applyFilter();"
/>
<ext:Button
runat="server"
Text="Load Filters"
Handler="loadFilter(this.up('grid').filterHeader);"
/>
<ext:Button
runat="server"
Text="Get Fields Values"
ToolTip="Get Values of Fields"
Handler="var values = Ext.encode(this.up('grid').filterHeader.getValue() ); Ext.Msg.alert('Fields Values', values);"
/>
<ext:Button
runat="server"
Text="Get Filter Values"
ToolTip="Get Filter Values of Grid"
Handler="var filters = Ext.encode(this.up('grid').filterHeader.getFilterV alues()); Ext.Msg.alert('Filter Values', filters);"
/>
<ext:Button
runat="server"
Text="Clear Filters"
Handler="this.up('grid').filterHeader.clearFilter();"
/>
</Items>
</ext:Toolbar>
</DockedItems>
</ext:GridPanel>
</Items>
</ext:Window>
</form>
</body>
</html>

Daniil
Aug 08, 2014, 8:18 AM
Thank you.

Indeed, a .getTotalCount() doesn't calculate records which are excluded by filters. Otherwise it would show a wrong number in a PagingToolbar's total field:
http://forums.ext.net/attachment.php?attachmentid=14082&stc=1

If you need a total count including the records excluded by filters, I can suggest:

<DataChanged Handler="#{gridpanel}.down('#status').update({ count: (this.snapshot && this.snapshot.length) || this.getTotalCount() });" />

It should work in both the cases.