title: ext.net filter on grid
body: <p>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...</p>
  
  <pre><code>&lt;ext:Store ID="Store1" runat="server"&gt;
              &lt;Reader&gt;
                  &lt;ext:JsonReader&gt;
                      &lt;Fields&gt;
                          &lt;ext:RecordField Name="FULLNAME" /&gt;
                          &lt;ext:RecordField Name="JOBTITLE" /&gt;
                          &lt;ext:RecordField Name="PHONENUMBER1" /&gt;
                      &lt;/Fields&gt;
                  &lt;/ext:JsonReader&gt;
              &lt;/Reader&gt;
          &lt;/ext:Store&gt;
  
  
  
  &lt;ext:Panel ID="Panel1" runat="server" Width="520" Height="300" Collapsible="true" Title="Add Attendies" Collapsed="true"&gt;
           &lt;TopBar&gt;
                  &lt;ext:Toolbar ID="Toolbar2" runat="server"&gt;
                      &lt;Items&gt;
                          &lt;ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Filter:" /&gt;
                          &lt;ext:ToolbarSpacer /&gt;
                          &lt;ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true"&gt;
                              &lt;Triggers&gt;
                                  &lt;ext:FieldTrigger Icon="Clear" /&gt;
                              &lt;/Triggers&gt;
                              &lt;Listeners&gt;
                               **&lt;KeyUp Fn="filtergrid()" Buffer="250" /&gt;
                               &lt;TriggerClick Handler="clearFilter();" /&gt;**
                              &lt;/Listeners&gt;
                          &lt;/ext:TriggerField&gt;
                      &lt;/Items&gt;
                  &lt;/ext:Toolbar&gt;
              &lt;/TopBar&gt;
              &lt;Items&gt;
                  &lt;ext:BorderLayout ID="BorderLayout1" runat="server"&gt;
                      &lt;West MarginsSummary="5 5 5 5"&gt;
                          &lt;ext:GridPanel 
                              ID="GridPanel1" 
                              runat="server" 
                              StoreID="Store1"
                              DDGroup="GridDDGroup"
                              EnableDragDrop="true"
                              StripeRows="true"
                              AutoExpandColumn="FULLNAME"
                              Width="250"
                              Title="All Contacts"&gt;
                              &lt;ColumnModel&gt;
                                  &lt;Columns&gt;
                                      &lt;ext:Column Header="Contact Name" ColumnID="FULLNAME"  Width="140" DataIndex="FULLNAME" /&gt;
                                      &lt;ext:Column Header="Title"        ColumnID="JOBTITLE" Width="75" DataIndex="JOBTITLE" /&gt;
                                      &lt;ext:Column Header="Phone"        ColumnID="PHONENUMBER1" Width="75" DataIndex="PHONENUMBER1" /&gt;
                                  &lt;/Columns&gt;
                              &lt;/ColumnModel&gt;
                              &lt;SelectionModel&gt;
                                  &lt;ext:RowSelectionModel ID="RowSelectionModel1" runat="server" /&gt;
                              &lt;/SelectionModel&gt;
                              &lt;GetDragDropText Fn="getDragDropText" /&gt;
                              &lt;Listeners&gt;
                                  &lt;Render Fn="setDD" /&gt;
                              &lt;/Listeners&gt;
                          &lt;/ext:GridPanel&gt;
                      &lt;/West&gt;
  
                      &lt;Center MarginsSummary="5 5 5 0"&gt;
                          &lt;ext:GridPanel 
                              ID="GridPanel2" 
                              runat="server" 
                              StoreID="Store2"
                              DDGroup="GridDDGroup"
                              EnableDragDrop="true"
                              StripeRows="true"
                              AutoExpandColumn="FULLNAME"
                              Width="250"
                              Title="Meeting Attendies"&gt;
                              &lt;ColumnModel&gt;
                                  &lt;Columns&gt;
                                      &lt;ext:Column ColumnID="Contact Name" Header="Contact Name" Width="140" DataIndex="FULLNAME" /&gt;
                                      &lt;ext:Column Header="Title" Width="75" DataIndex="JOBTITLE" /&gt;
                                      &lt;ext:Column Header="Phone Number" Width="75" DataIndex="PHONENUMBER1" /&gt;
  
                                  &lt;/Columns&gt;
                              &lt;/ColumnModel&gt;
                              &lt;SelectionModel&gt;
                                  &lt;ext:RowSelectionModel ID="RowSelectionModel2" runat="server" /&gt;
                              &lt;/SelectionModel&gt;
                              &lt;GetDragDropText Fn="getDragDropText" /&gt;
                              &lt;Listeners&gt;
                                  &lt;Render Fn="setDD" /&gt;
                              &lt;/Listeners&gt;
                          &lt;/ext:GridPanel&gt;
                      &lt;/Center&gt;
                  &lt;/ext:BorderLayout&gt;
              &lt;/Items&gt;
  
              &lt;BottomBar&gt;
                  &lt;ext:Toolbar ID="Toolbar1" runat="server"&gt;
                      &lt;Items&gt;
                          &lt;ext:ToolbarFill ID="ToolbarFill1" runat="server" /&gt;
                          &lt;ext:Button ID="Button1" runat="server" Text="Reset both grids"&gt;
                              &lt;Listeners&gt;
                                  &lt;Click Handler="Store1.loadData(Store1.proxy.data);Store2.removeAll();" /&gt;
                              &lt;/Listeners&gt;
                          &lt;/ext:Button&gt;
                      &lt;/Items&gt;
                  &lt;/ext:Toolbar&gt;
              &lt;/BottomBar&gt;
          &lt;/ext:Panel&gt;
  </code></pre>
  
  <p>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.</p>