grid에서 컬럼을 클릭, 더블클릭 하는 이벤트는 리스너로 등록을 해주어야 한다. 플렉스와 비슷하여 이해하는데 많은 시간이 걸리지 않으나, 이벤트 타입을 찾는데 시간을 너무 소비 했다. 이벤트 타입은 extjs의 API Docs를 통해 확인할 수 있으며, 자세한 정보는 Ext.view.View의 event 항목을 보면된다.
// 그리드 생성
grid = Ext.create('Ext.grid.Panel', {
	store : store,
	stateful : true,
	collapsible : true,
	stateId : 'stateGrid',
	columns : [
		/*
		* 헤더와 컬럼의 정렬이 동일할 경우 align 만 사용
		* 헤더 정렬  ->  style: 'text-align:center'
		* 컬럼 정렬  ->	 align:' { left || center || right }' 
		*/
		  { text : '직원명', 	width : 150,	sortable : false,	dataIndex : 'NAME',	style: 'text-align:center', 	align:'left'}
		, { text : '소속사무소',	width : 150,	sortable : false,	dataIndex : 'BRNM',	style: 'text-align:center', 	align:'left'}
		],
		listeners: {
 		        itemdblclick: {
 		       	/**
 			 * @grid		그리드 오브젝트
 			 * @selRow		선택한 셀의 오브젝트
 			 * @selHtml		선택한 셀의  html
 			 * 
 			 * 기본적으로 Ext.define에서 idProperty로 선언한 field가 internalId로 설정된다.  						 		 * 그 외 데이터는 selRow.data.{field}로 접근할 수 있다.
 			 */
 		            fn: function(grid, selRow, selHtml){
 		  	// your codes
 		            	}
 		        }
 		}
		autoHeight:true,
		width : 1025,
		title : '사용자 목록',
		renderTo : 'grid',
		viewConfig : {
			stripeRows : true,
			enableTextSelection : false
		}







기본적으로 extjs4에서는 헤더와 컬럼은 동일하게 정렬된다.
이를 개별로 지정하는 속성은 따로 없고, 스타일로 지정을 해 주어야 한다.

자세한 것은 바로 코드로 확인할 수 있다.

// 그리드 생성
grid = Ext.create('Ext.grid.Panel', 
{	store : store,
	stateful : true,
	collapsible : true,
	stateId : 'stateGrid',	columns : [
		/*
		* 헤더와 컬럼의 정렬이 동일할 경우 align 만 사용
		* 헤더 정렬  ->  style: 'text-align:center'
		* 컬럼 정렬  ->	 align:' { left || center || right }'
 		*/
		  { text : '직원명', 	width : 150,	sortable : false,	dataIndex : 'NAME',	style: 'text-align:center', 	align:'left'}	
		  , { text : '소속사무소',	width : 150,	sortable : false,	dataIndex : 'BRNM',	style: 'text-align:center', 	align:'left'}	
		],
		autoHeight:true,
		width : 1025,
		title : '사용자 목록',
		renderTo : 'grid',
		viewConfig : {
			stripeRows : true,
			enableTextSelection : false
		}









+ Recent posts