ExtJs를 처음 접하고 Sample을 이용해서 여러 폼들을 생성해보았다. 기존 샘플 예제에서는 현업에서 사용하기 위한 폼의 한계가 있었고, 나름대로 이렇게 저렇게 디자인을 바꿔보면서 주로 사용하게 되는 폼을 중심으로 아니 내가 설계한 UI에 맞는 화면들 중심으로 설명을 하고자 한다.
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을 직접 그리는 부분
});
