extjs 04_grid 클릭 이벤트 새로운 discovery_javascript 기술

EXTJS GRID에서 행이나 셀을 클릭하면 해당 행이나 셀의 내용(데이터)을 가져옵니다
Js 코드

코드 복사 코드는 다음과 같습니다.

grid.addListener('cellclick',cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var Record = Grid. getStore().getAt(rowIndex); //레코드 가져오기
var fieldName = Grid.getColumnModel().getDataIndex(columnIndex) //필드 이름 가져오기
var data = Record.get(fieldName); 🎜>Ext.MessageBox.alert('show','현재 선택된 데이터는' data)
}
grid.addListener('cellclick',cellclick)
function cellclick(grid, rowIndex, columnIndex, e) {
var Record = Grid.getStore().getAt(rowIndex); //레코드 가져오기
var fieldName = Grid.getColumnModel().getDataIndex(columnIndex) //필드 이름 가져오기
var data = Record.get(fieldName);
Ext.MessageBox.alert('show','현재 선택된 데이터는' data); ---- --------------------------------- ---- ----------
Js 코드

코드 복사

코드는 다음과 같습니다. grid.on('mouseover',function(e){//마우스 오버 이벤트 추가 var index = Grid.getView ().findRowIndex(e.getTarget ());//마우스가 위치한 대상에 따라 열 위치를 얻을 수 있습니다if(index!==false){//올바른 열을 얻었을 때, (들어오는 대상 열을 얻지 못하면 false를 반환하기 때문입니다.)

var Record = store.getAt(index);//이 열의 레코드 가져오기

var str = Ext.encode(record.data); //문자열을 조립해야 합니다. 여기서는 직렬화합니다.
var rowEl = Ext.get(e.getTarget());//대상을 Ext.Element 객체로 변환합니다
rowEl. set({
'ext:qtip':str //tip 속성 설정
},false)
}
})
grid.on('mouseover',function( e){/ /마우스 오버 이벤트 추가
var index =grid.getView().findRowIndex(e.getTarget());//마우스가 위치한 대상에 따라 컬럼의 위치를 ​​얻을 수 있습니다
if(index!==false){ //올바른 컬럼이 검색되면(들어오는 대상 컬럼이 검색되지 않으면 false가 반환되기 때문입니다)
var Record = store.getAt(index) //Get 이 열의 레코드
var str = Ext.encode(record.data);//문자열을 조립하려면 이 작업을 직접 수행해야 합니다. 여기에서 직렬화합니다.
var rowEl = Ext.get(e.getTarget ()) ;//대상을 Ext.Element 객체로 변환
rowEl.set({
'ext:qtip':str //tip 속성 설정
},
}
})


--------- --- ----------------------------------
Js 코드

코드 복사

코드는 다음과 같습니다. 청취자: { 'cellclick':function(grid ,rowIndex,columnIndex,e ){ } }

//그리드 셀을 클릭하면 트리거되는 이벤트입니다.

listeners: {
'cellclick' :function(grid,rowIndex,columnIndex ,e ){ }
}
//그리드 셀을 클릭하면 발생하는 이벤트입니다
Js 코드
grid.getView().getCell(rowIndex ,columnIndex).style.Background -color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600"
grid.getView().getCell (rowIndex,columnIndex).style . background-color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600"


전체를 바꾸고 싶어요. 배경색은 단순히 글자색이 아닙니다. 또한 셀을 클릭할 때 마지막으로 클릭한 셀의 색상을 원래 색상으로 복원하려면 어떻게 해야 합니까? ? ?
이전 클릭으로 변경된 색상을 복원하려면 테이블을 새로 고치고, 이번에 클릭한 셀의 색상을 변경하세요.
Js 코드

코드 복사

코드는 다음과 같습니다. grid.getView( ).refresh (); grid.getView().getCell(rowIndex,columnIndex).style.BackgroundColor="#FF9999"