Question

我想选择一个网格行（HtmlElement）并尝试在其上应用css类。但无法在extjs 4中选择网格中的行。

我在checkboxSelectionModel模式上选择一行并查找添加/删除cls。在1.X extjs中，Code看起来像那样;

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.getSelectionModel（）。DeSelectAll（）;删除后清除选择。我猜，这段代码只适用于网格中的记录，与列标题部分无关。有什么办法，我可以在标题中取消选择chekbox吗？

在详细调查中，我很惊讶地知道CheckBoxSelectionModel中显示的复选框不是html复选框，但它们是图像。因此，我无法在此处应用使用DOM概念取消选中复选框的想法。相反，必须要做一些CSS技巧。

以前有人遇到过这样的问题吗？这有什么解决方案吗？任何帮助将不胜感激。谢谢！

Answer 1

我们可以做很多方式，请参考下面

var summaryRow = grid.getView().getFeature(0); 
styleObj = {
     'background-color': '#c5c5c5'  
 };
summaryRow.view.el.setStyle(styleObj);

或者

var summaryRow = grid.getView();
styleObj = {
         'background-color': '#c5c5c5'  
};
summaryRow.addRowCls(<index>, styleObj);

感谢。

Answer 2

我的理解：您希望根据选择添加和删除css。您可以使用以下方法执行此操作：

  grid.getView().addRowCls(rowindex, "yourCssClass" );

使用以下命令移除您的CSS：

grid.getView().removeRowCls("rowindex","yourCssClass");

你可以在 selectiononchange 和取消选择 grid的事件监听器中使用上面。这是你如何玩它们。谢谢。

如何在extjs 4中选择gridpanel行作为HTMLELEMENT

2 个答案: