ExtJS에서 컴퍼넌트를 만들어 쓴다고 했을때 크게 3가지의 방법이 존재한다. 

그 중에 가장 많이 쓰는 2개의 차이점을 간략하게 적어 놓는다.

 
Ext.widget  
  이를 사용하게 될 경우 기존에 존재하는 컴퍼넌트의 인스턴스 쿼리를 반환하지 않는다. 
  즉 내가 만드는 컴퍼넌트가 다른 방법(create, define)으로 만들어져 있더라도 가져오지도 않고,
  새로 만들지만 다른 곳에서 찾아서 쓸 수 있는 쿼리를 리턴하지 않는 다는 것..
  
Ext.create
  이를 사용하게 될 경우 항상 해당 xtype의 인스턴스로 새로이 생성한다.
  생성과 함께 인스턴스를 찾아 쓸 수 있도록 쿼리가 만들어진다.
  만약 같은 컴퍼넌트를 각각 10곳에서 create 했다면 이론적으로 10개의 인스턴스가 존재하게 되는 것.


무조건 widget만 쓰는것도 안좋고, 그렇다고 create만 죽어라 하는 것도 좋지 않다.

하나의 폼을 10개의 화면에서 사용을 한다면..? 
10개의 화면에서 모두 create를 할것인가..? 아니면 widget을 할 것인가?? 

create와 widget은 임시, 1회용 또는 동적으로 폼의 형태를 변형할 경우에 적합하다고 생각해본다.

아니면 말고 

 		Ext.Ajax.request({
	        url: '../com/ProxyJsonSimpleOneList.jsp',
	        contentType: 'json',
	        params: {
	        	name: 'value',
	        	today: new Date(),
	        	code: Ext.getCmp( 'brcCode' ).value
	        },
	        success: function(response){
	        	console.log(response);
	        },
	        failure: function(response, opts) {
	        	commonExtAjaxFailure(response, opts);
	        }
	    });





dddd

그리드 사용중 헤더 통합, 하단에 합계를 노출해야할 업무가 있다.

features에 ftype을 summary로 해서 통계 기능을 이용하면 된다.

기본적으로 sum, max, min, average, count를 제공한다.


//commify는 0,000 포맷으로 변환해주는 펑션
function summaryRenderer(value, summaryData, dataIndex) {
	if(Number(value) > 0) value = commify(Number(value));
	return value+ ' 명';
}

grid = Ext.create('Ext.grid.Panel', {
	store : store,
	stateful : false,
	collapsible : false,
	multiSelect : false,
	stateId : 'stateGrid',
	disableSelection : true,
	loadMask : true,
	features: [{
		ftype: 'summary'
	}],
	columns : Ext.create('Ext.grid.header.Container', {
		items : [
			{ 
				text : '단위지역',	width : 140,	align :  'center',	sortable : false,	dataIndex : 'UNIT_AREA',
				summaryType: 'sum',
				summaryRenderer: function(value, summaryData, dataIndex) {
					return '합계';
				}
			},
			{ 
				text : '인구수',		width : 130,	align : 'center',	sortable : false,	dataIndex : 'TPPCN',
				// 컬럼 값
					renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
					return value;
					},
					xtype: 'numbercolumn', format:'0,000',
					summaryType: 'sum',
					summaryRenderer: summaryRenderer
				},
				{ text : '성별',
					columns: [
							{ 
								text     : '남성',	width    : 90, 	align : 'center',	sortable : false, 	dataIndex: 'MPPCN',
								xtype: 'numbercolumn', format:'0,000',
								summaryType: 'sum',
								summaryRenderer: summaryRenderer
							}, 
							{ 
								text     : '여성', 	width    : 90, 	align : 'center',	sortable : false, 	dataIndex: 'FPPCN',
								xtype: 'numbercolumn', format:'0,000',
								summaryType: 'sum',
								summaryRenderer: summaryRenderer
							}, 
						]
					}
				], 
		sortable : false
	}),
	listeners: {
		itemdblclick: {
			fn: function(grid, selRow, selHtml){
				// your codes...
			}
		}
	}
	autoHeight: true,
	width : 1025,
	renderTo : 'grid',
	viewConfig : {
		stripeRows : true,
		enableTextSelection : false
	}
});







extjs grid에서 dataStore를 모두 불러왔을때 이벤트 처리를 해야할 경우가 생겼다.

이전의 삽질을 바탕으로 listener를 먼저 생각했고, 이벤트는 onLoad, afterLoad 등 하다가 단순하게 load를 하니 작동한다.


		// create the Data Store
		    store = Ext.create('Ext.data.Store', {
		        pageSize: 20,
		        model: 'QnA',
		        //remoteSort: true,
		        proxy: new Ext.data.HttpProxy({ 
		            extraParams : jQuery('form[name="searchForm"]').formParams(),
		            url: REMOTE_URL, 
		            reader: new Ext.data.JsonReader(
				{ root: 'datas', totalProperty: 'totalCount'}
			)}
		        ),
		        listeners: {
		            load: function(dataStore, rows, bool) {
 		                console.log(dataStore);
 		                console.log(rows);
 		                console.log(bool);
		            },
		            scope: this
		        }
		    });







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