extjs - extjs 4でgridpanel行をHTMLELEMENTとして選択する方法

Question

グリッド行 (HtmlElement) を選択して、それに css クラスを適用しようとしています。しかし、extjs 4 のグリッドで行を選択できません。

チェックボックスSelectionModelパターンで行を選択し、clsを追加/削除しようとしています。1.X extjs では、コードは次のようになります。

function UncheckCheckHeader(control)
{
var grid=<%=grdForms.ClientID%>;
var hd =Ext.get(grid.getView().getHeaderCell(0).childNodes[0]); 

var store = grid.store; 

if(store.getCount()== control.getCount()) 
{
if(!hd.hasCls('x-grid3-hd-checker-on'))
{
hd.addCls('x-grid3-hd-checker-on');
}
}
else
{
if(hd.hasCls('x-grid3-hd-checker-on'))
{
hd.removeCls('x-grid3-hd-checker-on');
}
}
}

ヘッダークリックは次のとおりです。

<HeaderClick Fn="function(ct, column, e, t, eOpts )
                                             {    debugger;                  
                                                if(column.getIndex() == 0)
                                                {
                                                  var hd = Ext.fly(e.target.parentNode);

                                                  var isChecked = hd.hasCls('x-grid3-hd-checker-on');
                                                  var showSelectedOn=false;
                                                  if(!showSelectedOn)
                                                  {
                                                    if(isChecked)
                                                    {
                                                      selectionHeaderChecked=true;
                                                      #{checkSelectionModel}.setLocked(false);
                                                      #{checkSelectionModel}.selectAll();
                                                      #{checkSelectionModel}.setLocked(true);
                                                    }
                                                    else
                                                    {
                                                      selectionHeaderChecked=false;
                                                      #{checkSelectionModel}.setLocked(false);
                                                      #{checkSelectionModel}.deselectAll();
                                                      #{checkSelectionModel}.setLocked(true);
                                                    }  
                                                 }
                                                 else
                                                 {
                                                    if(!selectionHeaderChecked)
                                                    {
                                                      hd.addCls('x-grid3-hd-checker-on');
                                                    }
                                                    else
                                                    {
                                                      hd.removeCls('x-grid3-hd-checker-on');
                                                    }
                                                  }         
                                                }                                                                                    
                                              }" />

私は CheckBoxSelectionModel を持つ ExtJs Grid を持っています。ヘッダーのチェックボックスを選択すると、すべてのレコードがチェックされ、チェックボックスの選択を解除すると、すべてのレコードがチェック解除されます。もちろん、これは動作です。私のグリッドには、選択した/すべてのレコードを削除するための削除ボタンがあり、正常に動作しています。

今私の問題は、ヘッダーのチェックボックスをオンにして（レコード全体が選択されるように）、削除ボタンを押すと、グリッド内のレコード全体が削除されることです。ただし、列ヘッダーのチェックボックスの選択はチェックされたままです。

私はコードを使用しました: grid.getSelectionModel().DeSelectAll(); 削除後、選択をクリアします。おそらく、このコードはグリッド内のレコードにのみ適用され、列ヘッダー部分とは関係ありません。ヘッダーのチェックボックスの選択を解除する方法はありますか?

詳細に調べてみると、CheckBoxSelectionModel に表示されているチェックボックスが html チェックボックスではなく、画像であることがわかって驚きました。したがって、DOM の概念を使用してチェックボックスの選択を解除するという私の考えは、ここでは適用できません。代わりに、何らかの CSS トリックを実行する必要があります。

以前にそのような問題に直面した人はいますか? これに対する解決策はありますか？どんな助けでも大歓迎です。ありがとう！