ExtJs를 이용해서 폼을 만들때 다양한 방법으로 구성할 수 있지만, 나의 경우에는 가능한 Object들을 따로 생성해서 해당 FormPanel에 items로 추가하는 방법을 이용했다.
이렇게 한 이유는 한개의 화면에 생성되는 Object들을 명확히 할 필요가 있고, FormPanel에서는 이미 생성된 Object들을 items속성에 배열형태로 셋팅 함으로 스크립트의 가독성을 높일 수 있다고 생각했다.
실제 해보니 스크립트의 길이는 상당히 길어졌지만, 스크립트의 가독성 및 각 객체의 속성에 대한 구분이 좀 더 명확해지는 부분이 있었다.
이 보다 더 좋은 방법을 체험하기전까지는 현재의 방법으로 스크립트를 작성할 생각이다.
개발할 UI의 모습은 아래와 같다.
실제 개발을 하다보면 특정 값을 입력 받아서 해당하는 정보를 보여주는 형태의 UI가 꽤나 많다. 물론 복잡도는 이보다 더 높은 화면이 상당히 많이 있을 수 있다.
상기와 같은 화면을 구성하기 위한 JSP(HTML)와 JS파일은 아래와 같다.
JSP파일에는 div 태그를 이용해서 body부분에 div를 추가한다. div의 id를 'main_panel' 이라고 두자. 이 부분은 sample.js 파일이 로딩되면서 상기의 UI와 같이 화면을 보여줄 부분이다.
호출되는 sample.js파일의 내용을 살펴보자.
Ext.onReady(function() {
//Tooltip 제공을 위해서 global tooltip 초기화
Ext.QuickTips.init();
//사번을 입력 받기 위한 label 및 textfield 생성
var emp_no = new Ext.form.TextField({
fieldLabel: '사번',
id: 'empNo',
name: 'empNo',
allowBlank: false,
width: 100
});
//주민번호 입력을 위한 label 및 textfield 생성
var ssn = new Ext.form.TextField({
fieldLabel: '주민등록번호',
id: 'ssn',
name: 'ssn',
allowBlank: false,
width: 130
});
//확인 button 생성
var ok_btn = new Ext.Button({
text: '확인',
buttonAlign: 'center',
formBind: true,
handler:function(){ //버튼이 클릭 되었을때 실행되는 부분
alert('aaaa');
}
});
//사번을 Display하기 위한 label 생성
var emp_no2 = new Ext.form.Label({
fieldLabel: '사번',
id: 'empNo2',
name: 'empNo2',
width: 100
});
//성명을 Display하기 위한 label 생성
var emp_name = new Ext.form.Label({
fieldLabel: '성명',
id: 'empName',
name: 'empName',
width: 100
});
//부서를 Display하기 위한 label 생성
var dept = new Ext.form.Label({
fieldLabel: '부서(팀)',
id: 'dept',
name: 'dept',
width: 150
});
//연락처를 Display하기 위한 label 생성
var tel_no = new Ext.form.Label({
fieldLabel: '전화번호',
id: 'tel_no',
name: 'tel_no',
width: 100
});
var user_cnfm = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 140,
frame:true,
title:'사용자 확인',
buttonAlign: 'center',
monitorValid:true,
items: [{
xtype:'fieldset',
layout:'column', //컬럼 형태로 제공. 총 3개의 컬럼(emp_no, ssn, form)
items:[{
layout: 'form', // layout을 form으로 설정해야 라벨과 텍스트박스가 나타남.
items: [emp_no]
}, {
layout: 'form',
items: [ssn]
}, {
layout: 'form',
items: [ok_btn]
}]
}, {
xtype:'fieldset',
autoHeight:true,
collapsed: false,
layout:'column', // 컬럼형태.
items:[{
layout: 'form',
items: [emp_no2, dept]
}, {
layout: 'form',
items: [emp_name, tel_no]
}]
}]
});
user_cnfm.render('main_panel'); // FormPanel을 직접 그리는 부분
});
