Extjs grid와form 사이의 전송 값

왼쪽 Grid를 클릭할 때 오른쪽 Form의 데이터를 동기화하여 업데이트하려고 합니다.사용자가 Grid의 한 줄을 누르면 이 줄에 대응하는 정보를 Form에 표시하기 때문에 이 정보를 수정하고 삭제할 수 있습니다.이를 위해, 우리는 Grid에 이벤트 감청 함수를 추가하여 마우스 클릭 이벤트를 전문적으로 처리해야 한다. 아래의 코드와 같다.
하나:
//정보 수정 을 클릭하여 시작
　　grid.on('rowclick', function(grid, rowIndex, event) {
　　var record = grid.getStore().getAt(rowIndex);
　　form.getForm().loadRecord(record);
　　form.buttons[0].setText('수정');
　　});
2:

	 var chbox=new Ext.grid.CheckboxSelectionModel({
	 	listeners:{
	 		rowselect: function(sm, row, rec) {
//                   Ext.getCmp("sform").getForm().loadRecord(rec);
                   form.getForm().loadRecord(rec);
//	 			alert(rec.get('deptno'));
                        }
	 	}
	 });
	 
/*	 grid.on('rowclick',function(grid,rowIndex,event){
	 		var record = grid.getStore().getAt(rowIndex);
				form.getForm().loadRecord(record);
	 	});*/

여기에 감청된 이벤트의 이름은 rowclick입니다. 이것은 Ext.grid에 대응합니다.RowSelectionModel의 감청 이벤트는 사용자가 Grid의 한 줄을 선택할 때마다 발생합니다.이벤트가 촉발되는 동시에 우리가 설정한 감청 함수도 실행됩니다.
감청 함수는 세 개의 매개 변수를 미리 설정했다. 첫 번째 매개 변수grid는 어떤 Grid가 클릭되었는지 나타낸다.두 번째 매개 변수rowIndex는 어느 줄을 선택했는지 표시합니다.이벤트는 EXT 내부에서 통용되는 이벤트 대상입니다. 저희는 여기에서 사용하지 않았습니다.
감청 함수가 실행될 때, 우선grid를 통과합니다.getStore().getAt(rowIndex);선택한 줄에 대응하는 레코드를 얻습니다.이 레코드는store에 저장된 데이터이며, Grid에 표시되지 않은 id도 포함되어 있습니다.대응하는 모든 학생 정보는 이 레코드에서 얻을 수 있지만, 레코드에서 학생 정보를 하나하나 꺼내서 Form에 넣을 필요는 없습니다.Form에서 제공하는loadRecord () 함수는 Record의 데이터를 Form의 입력 구성 요소에 한 번에 부여할 수 있습니다. 입력 구성 요소의name이나hiddenName이 Record에서 정의한 속성과 일치하도록 하면 됩니다.
loadRecord () 를 사용하여 Grid에서 선택한 데이터를 Form에 복사한 후 form을 호출합니다.buttons[0].setText('수정');Form의 첫 번째 단추의 문자를 수정으로 설정합니다.이렇게 하면 사용자는 현재 Form을 제출하여 실행하는 것이 어떤 학생 정보를 수정하는 작업이라는 것을 알 수 있다.새 학생 정보를 계속 추가하려면'비우기'단추를 누르면 방금 Grid에서 복사한 정보를 모두 지울 수 있습니다. id 숨김 영역의 데이터를 포함하여 첫 번째 단추의'수정'을'추가'로 설정합니다.데이터를 다시 입력하고'제출'단추를 누르면'추가'작업이 실행됩니다.