ext.net filter on grid - extjs

Question

have my store and my grid panel, i need to add a filter box to it , so added a topbar tag, that has the field box to filter.. and want to add listeners on it so i would be filterer while writing, the 2 functions as shown are filtergrid() and clearFilter()...what those 2 functions should be, knowing that the store is binded with code behind...
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="FULLNAME" />
<ext:RecordField Name="JOBTITLE" />
<ext:RecordField Name="PHONENUMBER1" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Panel ID="Panel1" runat="server" Width="520" Height="300" Collapsible="true" Title="Add Attendies" Collapsed="true">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Filter:" />
<ext:ToolbarSpacer />
<ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true">
<Triggers>
<ext:FieldTrigger Icon="Clear" />
</Triggers>
<Listeners>
**<KeyUp Fn="filtergrid()" Buffer="250" />
<TriggerClick Handler="clearFilter();" />**
</Listeners>
</ext:TriggerField>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West MarginsSummary="5 5 5 5">
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
DDGroup="GridDDGroup"
EnableDragDrop="true"
StripeRows="true"
AutoExpandColumn="FULLNAME"
Width="250"
Title="All Contacts">
<ColumnModel>
<Columns>
<ext:Column Header="Contact Name" ColumnID="FULLNAME" Width="140" DataIndex="FULLNAME" />
<ext:Column Header="Title" ColumnID="JOBTITLE" Width="75" DataIndex="JOBTITLE" />
<ext:Column Header="Phone" ColumnID="PHONENUMBER1" Width="75" DataIndex="PHONENUMBER1" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<GetDragDropText Fn="getDragDropText" />
<Listeners>
<Render Fn="setDD" />
</Listeners>
</ext:GridPanel>
</West>
<Center MarginsSummary="5 5 5 0">
<ext:GridPanel
ID="GridPanel2"
runat="server"
StoreID="Store2"
DDGroup="GridDDGroup"
EnableDragDrop="true"
StripeRows="true"
AutoExpandColumn="FULLNAME"
Width="250"
Title="Meeting Attendies">
<ColumnModel>
<Columns>
<ext:Column ColumnID="Contact Name" Header="Contact Name" Width="140" DataIndex="FULLNAME" />
<ext:Column Header="Title" Width="75" DataIndex="JOBTITLE" />
<ext:Column Header="Phone Number" Width="75" DataIndex="PHONENUMBER1" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
</SelectionModel>
<GetDragDropText Fn="getDragDropText" />
<Listeners>
<Render Fn="setDD" />
</Listeners>
</ext:GridPanel>
</Center>
</ext:BorderLayout>
</Items>
<BottomBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
<ext:Button ID="Button1" runat="server" Text="Reset both grids">
<Listeners>
<Click Handler="Store1.loadData(Store1.proxy.data);Store2.removeAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
so there is 2 functions that i have to write , one that filter an return the result to be written in the panel, and the other one is to clear and restore the datasource again.

Answer 1

You can apply a filter using the filterBy method and passing a delegate function which returns true or false based on some logic of your choosing and then remove the filter using clearFilter
In mode cody terms, something like this:
clearFilter() {
theGridPanel.store.clearFilter(false);
}
filterGrid() {
theGridPanel.store.filterBy(theFilterFunction)
}
theFilterFunction(record, id) {
if(record.data.aField === 'yellow') {
return true;
}
return false;
}