extjs - 根据使用按钮的值从网格中删除行

Question

我需要根据 columnStatus 的值删除一些行。我尝试了代码，但没有任何反应。

例如，我有 6 行的值为 (1,1,3,2,4,3)，我想删除状态为 2,3 和 4 的行，结果只剩下两行，即第 1 行和第 2 行。

        ID   Status
Row 1   1       1
Row 2   2       1
Row 3   3       3
Row 4   4       2
Row 5   5       4
Row 6   6       3

网格面板

 <ext:GridPanel ID="grid" runat="server" Title= “" AutoWidth="true" AutoHeight="true"
    Padding="4" StripeRows="true" Draggable="false" Selectable="true"  Icon="Application">
    <Store>
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name=" personID " Mapping="PersonsId"/>
                        <ext:RecordField Name="description" Mapping="Description " />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
    </Store>
    <ColumnModel ID="ColumnModel1" runat="server">
        <Columns>
            <ext:Column DataIndex="personID" Header="ID" Width="100">
            </ext:Column>
            <ext:Column ColumnID="columnStatus" DataIndex=" description " Header="Status" Width="130">
                <Renderer Handler="return imgRenderer(value);"  />
            </ext:Column>
        </Columns>
    </ColumnModel>
    <SelectionModel>
        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="false"/>
    </SelectionModel>
</ext:GridPanel>

删除按钮：

<ext:Panel runat="server" ID="panel" Height="0">
    <TopBar>
        <ext:Toolbar runat="server">
            <Items>
                <ext:Button ID="btnClearSelection" runat="server" Text="Delete"    OnDirectClick="btnClearSelection_Clicked" Icon="Delete">
                   <Listeners>
                        <Click Handler="Delete(#{grid});" />
                    </Listeners>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    </TopBar>
</ext:Panel>

删除功能：

function Delete(grid) {

        alert("testing button clicked");

        for (var i = 0; i < grid.store.totalLength; i++ ) {
            var status = grid.store.getAt(i).data["columnStatus"];
            if (status == "2"){
                grid.getSelectionModel().selectRow(i ,true);
            }
            grid.deleteSelected();
        }

    }

这是 imgrender 函数，以防它与问题相关：

function imgRenderer(value) {
        if (value == "1") {
            return value + "                   "
            + "<img src='/img/flag_green.png' id='1' class='Icon' />";
        }
        else if (value == "2") {
            return value + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
            + "<img src='/img/flag_red.png' id='2' class='Icon' />";
        }
        else if (value == "3") {
            return value + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
            + "<img src='/img/flag_orange.png' id='3' class='Icon'/>";
        }

        else if (value == "4") {
            return value + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
            + "<img src='/img/flag_green.png' id='4' class='Icon' />";
        }
    }

编辑：我使用 firebug 运行它，但出现错误：grid.store.getAt(i) is undefined

Answer 1

function Delete(grid) {
     var i = 0;
     if (grid.store.getCount() > 0) {
         for (i = grid.store.getCount() - 1; i >= 0; i--) {
             var status = grid.store.getAt(i).data["description"];
             if (status == "2" || status == "3" || status == "4") {
                 grid.store.removeAt(i);
             }
         }
     }
 }

Answer 2

您是否尝试过在商店中使用 removeAt() 方法？

function Delete(grid) {

    alert("testing button clicked");

    if (grid.store.count() > 0) {
        for (var i = grid.store.count(); i >= 0; i--) {
            var status = grid.store.getAt(i).data["columnStatus"];
            if (status == "2"){
                grid.store.removeAt(i);
            }
        }
    }
}