网格上的 ext.net 过滤器答案

【问题标题】：ext.net filter on grid网格上的 ext.net 过滤器
【发布时间】：2011-11-09 08:24:11
【问题描述】：

有我的商店和我的网格面板，我需要向它添加一个过滤器框，所以添加了一个顶部栏标签，它具有要过滤的字段框..并希望在其上添加侦听器，因此我将在编写时成为过滤器，如图所示的2个函数分别是filtergrid()和clearFilter()...这2个函数应该是什么，知道store绑定了后面的代码...

<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 个函数，一个是过滤并返回要写入面板的结果，另一个是再次清除和恢复数据源。

【问题讨论】：

标签： extjs ext.net

【解决方案1】：

您可以使用 filterBy 方法应用过滤器并传递一个委托函数，该函数根据您选择的某些逻辑返回 true 或 false，然后使用 clearFilter 删除过滤器

在模式代码中，类似这样的：

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

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

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

【讨论】：