如何在 extjs 4 中选择网格面板行作为 HTMLELEMENT

Posted 2023-03-11

【中文标题】如何在 extjs 4 中选择网格面板行作为 HTMLELEMENT

【英文标题】：How to select gridpanel row as HTMLELEMENT in extjs 4

【发布时间】：2013-06-19 09:48:35

【问题描述】：

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

我在 checkboxSelectionModel 模式上选择了一行并希望添加/删除 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.getSelectionModel().DeSelectAll();清除选择，删除后。我猜，此代码仅适用于网格中的记录，与列标题部分无关。有什么办法，我可以取消选择标题中的复选框吗？

经过详细调查，我惊讶地发现 CheckBoxSelectionModel 中显示的复选框不是 html 复选框，而是图像。所以我使用 DOM 概念取消选中复选框的想法不能在这里应用。相反，必须使用某种 CSS 技巧。

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

【问题讨论】：

我在这里寻找标题单元格...

【参考方案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);

谢谢。

【讨论】：

谢谢你是对的，但我需要访问这个“x-grid-hd-checker-on”类来选择/取消选择所有网格行。

好的，要解决您的 plm，我需要遍历您的代码结构。最好参考下面的示例链接docs.sencha.com/extjs/4.2.1/#!/example/grid/grid-plugins.html 我希望你能在你的 extjs sdk 包中获得该代码，供你参考，请参阅 /examples/grid/grid-plugins.html 中的路径

【参考方案2】：

我的理解：您想根据选择添加和删除 css。您可以使用：

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

并使用 :

删除您的 css

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

您可以在 selectiononchange 和 deselect 事件监听器中使用上述网格。如何使用它们取决于您。谢谢。