Delete row(s) from grid depending on value with button

Question

I need to delete some rows depending on the value of the columnStatus. I tried the code but nothing happens.

For example, I have 6 rows with values (1,1,3,2,4,3) and I want to delete rows with status 2,3 and 4 resulting in only two rows left, row 1 and row 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

Gridpanel

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

Delete button:

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

Delete function:

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();
        }

    }

Here is the imgrender function in case it's relevant to the problem:

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' />";
        }
    }

Edit: I ran it using firebug and I get an error: 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);
             }
         }
     }
 }