網格上的ext.net過濾器

Question

有我的商店和我的網格面板，我需要添加一個過濾器框，所以添加了一個頂欄標籤，它有過濾器的字段框..並且想要添加監聽器而寫作，2個功能，我將filterer如圖所示的filtergrid（）和clearFilter（）......那些2個功能應該是什麼，知道這家店是用綁定代碼隱藏...

<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> 

所以有2個函數需要編寫，一個是過濾返回結果寫入面板，另一個是清除並重新恢復數據源。

Answer 1

您可以申請使用filterBy方法並傳遞根據您選擇的一些邏輯返回真或假，然後使用clearFilter

在模式科迪方面取下過濾網的委託功能的過濾器，是這樣的：

clearFilter() { 
    theGridPanel.store.clearFilter(false); 
} 

filterGrid() { 
    theGridPanel.store.filterBy(theFilterFunction) 
} 

theFilterFunction(record, id) { 
    if(record.data.aField === 'yellow') { 
     return true; 
    } 
    return false; 
}