Extends에서 HTMLELEMENT로 gridpanel 행을 선택하는 방법 4

격자 행 (HtmlElement)을 선택하고 CSS 클래스를 적용하려고합니다. ext2에서 그리드의 행을 선택할 수 없습니다.Extends에서 HTMLELEMENT로 gridpanel 행을 선택하는 방법 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(); 삭제 후 선택을 취소합니다. 이 코드는 그리드의 레코드에만 적용되며 열 머리글 부분과 아무 관련이 없습니다. 어떤 방법이 있더라도 머리글에서 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

좋아, plm을 해결하기 위해 코드 구조를 살펴볼 필요가있다. 아래 예제 링크를 참조하십시오. http://docs.sencha.com/extjs/4.2.1/#!/example/grid/grid-plugins.html 참고 자료로 extjs sdk 패키지에 해당 코드가 제공되기를 바랍니다. /examples/grid/grid-plugins.html의 경로를 참조하십시오. – Hariharan

나의 이해 :

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

을 그리고 사용하여 CSS를 제거 :

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

당신은 위의 사용할 수있는 추가 및 selection.You에 따라 CSS를 제거하여이 작업을 수행 할 수 할 selectiononchange 및 Grid의 이벤트 리스너를 선택 취소하십시오. 그 (것)들과 놀는 방법까지 당신에게이다. 감사합니다.

출처

2013-06-19 11:32:04 Dev

Extends에서 HTMLELEMENT로 gridpanel 행을 선택하는 방법 4

답변

관련 문제