From JCFWiKi

[편집] javascrpt파일

[편집] findCode함수

• 화면이 로딩될 때 코드값을 가져오는 메소드(findCode)를 onReady메소드 안에 넣는다.
• findCode 메소드에서는 Ext.Ajax.request라는 메소드 사용하여 서버에request를 보낼 url 을 지정한다. 서버로부터 값을 제대로 받아왔는지 확인하기 위해 success 와 failure을 지정해주고 success function 안에는 try /catch 문을 선언한다.
• alert(r.responseText)을 통해 받아온 JSON 데이터값을 alert창으로 확인한다.
• cbStore3.loadData 로 cbStore3라는 JsonStore 에 받아온 데이터 중 해당되는 데이터를 담는다.

Ext.onReady(function(){
     findCode();
}

function findCode(){
params = "{"  + "}"
           	
		Ext.Ajax.request({
		    url: '/mdms/deptInfo/findCodes.action',
		   jsonData: params,
		    headers: {
            	'Content-Type': 'application/json'
        	},		               
		    success: function( r, o ) {
		    	alert(r.responseText);	    	
		    	try {
		    		cbStore3.loadData(Ext.decode(r.responseText));
		    	
		    	} catch(e) {
		    	}
	    	},
			failure: function( r, o ) {
			alert("ERR"+r.responseText);
			}
		})
 
}

[편집] JsonStore

• cbStore3는 findCode에서 받아온 데이터를 저장하기 위한 JsonStore 이다. New Ext.data.JsonStore 로 cbStore3 라는 JsonStore 를 생성한다. root에는 action의 return 값을 fields에는 List로 받은 return 값의 각Object들을 넣는다. '

    //#########################################################################
	/* 
	 * JsonStore 생성
	 */
// ###########################################################################
	var cbStore3 = new Ext.data.JsonStore({
		root:'inspTrgtList',
	    fields: [ 'id', 'name', 'parentId']
	});

7.3.3. ComboBox

• new Ext.form.ComboBox 로 combo3라는 ComboBox를 생성한다
• 밑의 예제에 있는 property들 중에 빨간글씨로 지정되어 있는 것들은 모든 ComboBox마다 해당되는 데이터를 바인딩하고, 그 외의 것들은 밑에 예제와 동일하게 지정한다.

/* 
	 * 콤보박스 생성
	 */
var combo3 = new Ext.form.ComboBox({
	    store: cbStore3,
	     displayField:'name',
	     valueField: 'id',
	    typeAhead: true,
	    mode: 'local',
	    triggerAction: 'all',
	    emptyText:'Select a state...',
	    selectOnFocus:true,
	    editable: true,
	    applyTo: 'm_inspTrgtCode'
	});

• Preperty 설명)
  • Store: 바인딩할 store 지정,
  • displayField : 화면에 보여지는 text 값
  • valueField: 실제 저장되는 value 값
  • Mode: local data를 로당할지 server에서 data를 가져와 로딩할지 여부 (local은 local data를 로드한다는 뜻이고 remote는 server로부터 data를 로드한다는 뜻이다)
  • triggerAction: 이미 선택된 값 외의 코드값도 선택할 수 있게할지 여부( triggerAction을 all이라고 지정하지 않는다면 이미 값이 있거나, 한번 선택된 코드값은 수정할 수 없음)
  • emptyText : combox에 값이 바인딩이 되지 않았을 때 기본으로 보여지는 텍스트
  • selectOnFocus: combox를 클릭했을 때, combox에 바인딩된 데이터를 Focus 할지 여부이다. (True로 설정해놓았으면, combox를 클릭했을 때, combox에 바인딩된 데이터가 파란네모박스 안에 흰글씨로 Focus 됨)
  • Editable: combox 수정여부(ombox에서 선택하기 않고 직접입력이 가능하도록 설정하고 싶다면 true로 지정)
  • applyTo: 실제 바인딩 할 jsp파일의 id