Ext-js common script

From JCFWiKi

Jump to: navigation, search

[편집] 공통스크립트 리스트

[편집] 사용방법

  • toUpperCase – 영문글자열을 대문자로 변환

예)

	<td class="Mbox_bg">
       <input type="text" id="m_oper" size="15" maxlength="10" class="Mbox_C" onBlur="toUpperCase(id)">
</td>
  • 참조) gmdat_common.js 의 toUpperCase
/* 
 * 받은 영문글자열을 대문자로 바꾸기
 */
function toUpperCase(Uid) {
	var Uname = document.getElementById(Uid).value;
	if (Uname == "" || Uname == 0)
	{
		return;
	}
	else 
	{	
		Uname = Uname.toUpperCase();
					document.getElementById(Uid).value = Uname;
	}
}
  • showCalendar – 달력 생성

밑의 예제는 gageMast[1].jsp 파일의 일부이다. onClick 이벤트를 showCalendar 로 지정하여 달력팝업창을 나타낸다.. 여기서 'm_regiDate'는 달력팝업창에서 선택할 날짜를 입력할 input의 id이고, 'cal3'은 달력팝업창을 띄울 div의 id이다.

<td class="Mnn_label" nowrap width='10%'>등록일자</td>
       <td class="Mbox_bg">
       	<input type="text" id="m_regiDate" size="15" maxlength="8" class="Mbox_D"
 isDate="Y" readonly>
       	<input type="button" class="submit1" value="달력"
 onClick="showCalendar('m_regiDate', 'cal3');"/>
       	<div id="cal3" style="position:absolute; left:224; top:360; z-index:1"></div>
       </td>
  • 참조) gmdat_common.js 의 showCalendar
/*
 * calendar 생성
 */
function showCalendar(domId, posiId) {
	var cal = new Ext.DatePicker({
		dayNames : ['일','월','화','수','목','금','토'],     // 요일의 이름을 넣어줍니다. 
	   	monthNames : ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],     // 월 이름 이구여
	   	format : "Y년 m월 d일",             // 기본 데이타 형식입니다.
	   	disabledDays : null,
	   	disabledDaysText : "사용불가",
	   	disabledDates : null,
	   	disabledDatesText : "사용불가",
	   	minValue : null,
	   	maxValue : null,
	   	minText : "필드 안의 날짜는 반드시 {0}의 이후이어야 한다. ",
	   	maxText : "필드 안의 날짜는 반드시 {0}의 이전이어야 한다. ",
	   	invalidText : "{0} 은 유효한 날짜가 아닙니다. - 반드시 {1}과 같은 형식이어야 합니다.",
	   	nextText : "다음 달(Ctrl+Right)",
	   	prevText : "이전 달(Ctrl+Left)",
	   	todayText : "오늘은 {0}"     // 처음 생성하면 하단에 Today라고 버튼이 있는데 그 버튼의 메세지를 바꿔줍니다. 이미지에서는 이미 바뀐 상태입니다. 
	});
	cal.setValue(new Date());   // 오늘 날짜로 달력을 셋팅합니다.
	cal.render(posiId);
	cal.on('select', function(cal, date) {
		Ext.get(domId).dom.value = formatDate(date);
		cal.destroy();
	});
} ‘
  • numberOnly - 숫자만 입력 가능하도록 설졍

밑의 예제는 gageMast[1].jsp 파일의 일부이다. onkeypress 이벤트를 numberOnly 로 지정하여 오직 숫자만 입력할 수 있도록 설정한다.

<td class="Mbox_bg">
       <input type="text" id="m_acquCost" size="15" maxlength="50" class="Mbox_F" isAmt="Y" onBlur="setCurrency(id)" onkeypress="numberOnly()">
</td>
  • 참조) gmdat_common.js 의 numberOnly
function numberOnly() {
	var input_key = event.keyCode;
	if (!(isNumber( input_key )))
	{	
		event.keyCode = '0';
		return false;
	}