CommonModule CodeUserGuide ext-js
From JCFWiKi
|
|
Copyright © 2008 Daewoo Information Systems Co., Ltd. |
- combox박스가 두개 이상이여서 상위코드 클릭 시 해당되는 하위코드가 바인딩되어야하는 경우 ext-js를 사용하였다.
- 예) 코드관리에서 상위코드 가져오기
[편집] code.js파일
- findCodes()
Ext.onReady(function(){
findCodes();
}
- 화면이 로딩될 때 코드값을 가져오는 메소드(findCodes)를 onReady메소드 안에 넣는다.
/*
* 로딩시 combox 값 가져오기
*/
function findCodes() {
var params = '{'
+ 'parentId:\"' + "0" + '\",'
+ '}'
Ext.Ajax.request({
url: '/jcf-common/comCode/findComCodeList.action',
jsonData: params,
headers:{
'Content-Type' : 'application/json'
},
success: function( r, o ) {
try {
cbUpwCodeStore.loadData(Ext.decode(r.responseText));
cbwCodeStore.loadData(Ext.decode(r.responseText));
} catch(e) {
}
},
failure: function( r, o ) {
alert("find Error! "+r.responseText);
}
})
}
- parentId가 0인 코드값을 가져오기 위해서 위에 같이 params을 지정한다.(Action참고)
- Ext.Ajax.request라는 메소드 사용하여 서버에 request를 보낼 url 과 위에서 정의한 params을 jsonData에 넣는다.
- 서버로부터 값을 제대로 받아왔는지 확인하기 위해 success 와 failure을 지정해주고 success function 안에는 try /catch 문을 선언한다.
- alert(r.responseText)을 통해 받아온 JSON 데이터값을 alert창으로 확인한다.
- cbUpwCodeStore.loadData, cbwCodeStore.loadData 로 JsonStore 에 받아온 데이터를 담는다.
- JsonStore
var Code = Ext.data.Record.create([
{name: 'id', type: 'string'},
{name: 'name', type: 'string'}
]);
//상의 업무 시스템 Store 정의
var cbUpwCodeStore = new Ext.data.JsonStore({
root:'upwCodeList',
fields: [ 'id', 'name']
});
// 업무 시스템 Store 정의
var cbwCodeStore = new Ext.data.JsonStore({
root:'workCodeList',
fields: [ 'id', 'name']
});
- cbUpwCodeStore과 cbwCodeStore 는 findCodes에서 받아온 데이터를 저장하기 위한 JsonStore 이다.
- New Ext.data.JsonStore 로 cbwCodeStore 라는 JsonStore 를 생성한다. root에는 action의 OutChannel에서 지정한 값을 fields에는 받은 값의 각 Object들을 넣는다.
- ComboBox 생성
// 상위업무시스템 combox
cbUpwCode = new Ext.form.ComboBox({
store: cbUpwCodeStore,
valueField: 'id',
displayField:'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
editable:false,
emptyText:'시스템 코드를 선택하세요',
selectOnFocus:true,
listeners:{select:{fn:function(combo, value) {
var comboNext = Ext.getCmp('cbUpwCode');
//클릭한 시스템코드에 따라 상위업무코드 필터링
cbwCodeStore.filter('parentId', this.getValue());
}}},
applyTo: 'upwCombo'
});
var cbworkCodeId;
// 상위업무코드 combox
cbworkCode = new Ext.form.ComboBox({
store: cbwCodeStore,
valueField: 'id',
displayField:'name',
typeAhead: true,
editable:false,
mode: 'local',
triggerAction: 'all',
emptyText:'업무를 선택하세요',
selectOnFocus:true,
listeners:{select:{fn:function(combo, value) {
cbworkCodeId=this.getValue();
}}},
applyTo: 'workCombo'
});
- new Ext.form.ComboBox 로 cbUpwCode 와 cbworkCode 라는 ComboBox를 생성한다
- Preperty 설명)
- Store: 바인딩할 store 지정,
- displayField : 화면에 보여지는 text 값
- valueField: 실제 저장되는 value 값
- Editable: combox 수정여부(ombox에서 선택하기 않고 직접입력이 가능하도록 설정하고 싶다면 true로 지정)
- Mode: local data를 로당할지 server에서 data를 가져와 로딩할지 여부 (local은 local data를 로드한다는 뜻이고 remote는 server로부터 data를 로드한다는 뜻이다)
- triggerAction: 이미 선택된 값 외의 코드값도 선택할 수 있게할지 여부( triggerAction을 all이라고 지정하지 않는다면 이미 값이 있거나, 한번 선택된 코드값은 수정할 수 없음)
- emptyText : combox에 값이 바인딩이 되지 않았을 때 기본으로 보여지는 텍스트
- selectOnFocus: combox를 클릭했을 때, combox에 바인딩된 데이터를 Focus 할지 여부이다. (True로 설정해놓았으면, combox를 클릭했을 때, combox에 바인딩된 데이터가 파란네모박스 안에 흰글씨로 Focus 됨)
- listeners 클릭시 선택된 데이터를 읽어서 다른곳에서 참조할 때 사용
- applyTo: 실제 바인딩 할 jsp파일의 id
[편집] CodeAction.java
public String findComCodeList(){ private CodeService codeService; private Code code; private List upwCodeList; private List workCodeList; private List codeDivList; private List codeList; Map searchMap = (Map) InChannel.getVariables(); upwCodeList=codeService.findCodes(searchMap); workCodeList=new ArrayList(); for (int i = 0; i < upwCodeList.size(); i++) { System.out.println(upwCodeList.size()); code = (Code) upwCodeList.get(i); System.out.println((code.getId())); List tmpcodeList =codeService.findCodes(code.getId()); if (null == tmpcodeList) continue; workCodeList.addAll(tmpcodeList); } OutChannel.setDataSet("upwCodeList", upwCodeList); OutChannel.setDataSet("workCodeList", workCodeList); OutChannel.send(); return null; }
- InChannel.getVariables을 통해 js파일에서 param으로 넘긴 값을 Map 유형의 searchMap에 받아온다. (parentId는 key, 0은 value로 받아옴)
- OutChannel.setDataSet을 통해 js파일에 JsonData 유형으로 변환해서 보낸다.
- 여기서 "upwCodeList"은 js파일에서 선언한 JsonStore의 root와 일치되어야하고 upwCodeList는 위에서 선언한 값이다.
