Hello @Geovision!
Looks like we are missing a piece of the GridFilters plug-in where the
filter
block is part of the
ext-column
component.
But you can easily overcome this by using the
customConfig
block.
Here's an example adding the GridFilters functionality to the
Simple Array Grid Example:
<ext-section target="Main">
<ext-gridPanel title="Array Grid"
width="960"
height="640"
frame="true"
store="companyStore2">
<plugins>
<ext-gridFilters />
</plugins>
<columns>
<ext-column text="Company" dataIndex="company" flex="1">
<customConfig>
<ext-add key="filter">
<ext-add key="type" value="string" />
</ext-add>
</customConfig>
</ext-column>
<ext-column text="Price" dataIndex="price" renderer="Ext.util.Format.usMoney">
<customConfig>
<ext-add key="filter">
<ext-add key="type" value="number" />
</ext-add>
</customConfig>
</ext-column>
<ext-column text="Change" dataIndex="change" renderer="change">
<customConfig>
<ext-add key="filter">
<ext-add key="type" value="number" />
</ext-add>
</customConfig>
</ext-column>
<ext-column text="Change %" dataIndex="pctChange" renderer="pctChange">
<customConfig>
<ext-add key="filter">
<ext-add key="type" value="number" />
</ext-add>
</customConfig>
</ext-column>
<ext-dateColumn text="Last Updated"
dataIndex="lastChange"
width="140"
format="yyyy-MM-dd">
<customConfig>
<ext-add key="filter">
<ext-add key="type" value="date" />
<ext-add key="dateFormat" value="n/j/Y" />
<ext-add key="pickerDefaults">
<ext-add key="ariaTitleDateFormat" value="F d" />
<ext-add key="format" value="n/j/Y" />
<ext-add key="longDayFormat" value="l, F j, Y" />
<ext-add key="todayText" value="Now" />
</ext-add>
</ext-add>
</customConfig>
</ext-dateColumn>
</columns>
<store>
<ext-store data="Model.GridData" storeId="companyStore2">
<fields>
<ext-dataField name="company" />
<ext-numberDataField name="price" />
<ext-numberDataField name="change" />
<ext-numberDataField name="pctChange" />
<ext-dateDataField name="lastChange" dateFormat="yyyy-MM-dd hh:mm:tt" />
</fields>
</ext-store>
</store>
<bbar>
<ext-toolbar>
<items>
<ext-button text="Print" iconCls="x-md md-icon-print" handler="this.up('grid').print();" />
</items>
</ext-toolbar>
</bbar>
</ext-gridPanel>
</ext-section>
The model code is the same in the example pointed.
The missing grid filter type here is the
list one, so based in the
Local Grid Filters at Ext.NET 5 Examples Explorer, I come up with (besides the elaborate
date filter above):
<customConfig>
<ext-add key="filter">
<ext-add key="type" value="list" />
<ext-add key="options" value="[1.01, 1.02, 1.28, 1.39, 2.4]" mode="Raw" />
</ext-add>
</customConfig>
Notice the contents of
options
is
Raw
, that means javascript code; and it should describe a JavaScript Array (thus wrapped in brackets -- []).
This means when you need to pass strings as the list of options, you need to properly quote them. Switching the markup quotes to single quotes works well, and you can also single-quote strings in JavaScript while you keep the outer quotes as double ones, among other possible syntaxes to attain the same result. Below, a list of string, double quoted, wrapped in single quotes:
<customConfig>
<ext-add key="filter">
<ext-add key="type" value="list" />
<ext-add key="options" value='["extra small", "small", "medium", "large", "extra large"]' mode="Raw" />
</ext-add>
</customConfig>
We have logged
issue #1854 to track the missing feature, but you should be good for the time being with this alternative.
If you are interested in going even deeper in the grid filters plugin capabilities and options, please refer to the client-side documentation available at
Ext.grid.filters.Filters documentation at Sencha Docs
Hope this helps!