如何在extjs中選擇網格面板行作爲HTMLELEMENT 4

我想選擇網格行（HtmlElement）並嘗試在其上應用css類。但無法選擇extjs 4中的網格中的行。如何在extjs中選擇網格面板行作爲HTMLELEMENT 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'); 
                } 
                }   
               }                      
               }" />

我有一個ExtJS網格CheckBoxSelectionModel。選擇標題複選框將檢查所有記錄並取消選中該複選框，取消選中所有記錄，當然這是行爲。我的網格有一個刪除按鈕來刪除選定的/所有記錄，工作正常。

現在我的問題是，當我檢查標題中的複選框（以便選擇整個記錄）並點擊我的刪除按鈕時，網格中的整個記錄被刪除。但是，列標題中的複選框選擇仍然保持爲選中狀態。

我使用了代碼：grid.getSelectionModel（）。DeSelectAll（）;刪除後清除選擇。我猜，這段代碼只適用於網格中的記錄，並且與列標題部分無關。有沒有辦法，我可以取消選擇標題中的chekbox？

在詳細調查中，我驚訝地發現CheckBoxSelectionModel中顯示的複選框不是html複選框，但它們是圖像。因此，我的想法是使用DOM概念取消選擇複選框，因此無法在此處應用。相反，一些CSS技巧必須完成。

有沒有人遇到過這樣的問題？有沒有解決方案？任何幫助將不勝感激。謝謝！

來源

2013-06-19 user2110717

我在這裏尋找標題單元... – user2110717

我們可以在很多方式做，請參閱以下

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

感謝。

來源

2013-06-19 10:47:50 Hariharan

謝謝你是對的，但我需要訪問這個'x-grid-hd-checker-on'類來選擇/取消選擇所有網格行。 – user2110717

好的，爲了解決你的問題，我需要遍歷你的代碼結構。更好地參考下面的示例鏈接http://docs.sencha.com/extjs/4.2.1/#!/example/grid/grid-plugins.html我希望你會在你的extjs sdk包中獲得該代碼，以供參考請參閱/examples/grid/grid-plugins.html中的路徑 – Hariharan

我的理解：你想添加和刪除基於selection.You CSS可以做到這一點使用：

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

而且使用刪除你的CSS：

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

你可以使用上面在selectiononchange和取消選擇網格的事件監聽器。它是你如何與他們玩。謝謝。

來源

2013-06-19 11:32:04 Dev

如何在extjs中選擇網格面板行作爲HTMLELEMENT 4

回答

相關問題