extjs - ボタンで値に応じてグリッドから行を削除します

Question

columnStatusの値に応じて、いくつかの行を削除する必要があります。コードを試しましたが、何も起こりません。

たとえば、値（1,1,3,2,4,3）の行が6つあり、ステータス2、3、および4の行を削除して、行1と行2の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）が未定義です

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