라디오그룹 기본 가이드

이 화면은 라디오그룹 컴포넌트에 대한 샘플 화면이다.

라디오그룹 컴포넌트는 라디오버튼을 여러개 합쳐놓은 컴포넌트이다.

아이템은 수평방향 또는 수직방향으로 나열할 수 있다.

아이템의 너비(높이)는 라디오그룹의 너비(높이)를 아이템개수로 균등분할하여 표시된다.

관련 속성으로 item_dir, radio_horzalign, radio_vertalign, text_horzalign, text_vertalign, column_count, row_count, picklist_style, text_wordbreak, text_wordellipsis가 있다.

관련 API로 getitemdir, setitemdir, getradiohorzalign, setradiohorzalign, getradiovertalign, setradiovertalign, gettexthorzalign, settexthorzalign,

gettextvertalign, settextvertalign, getcolumncount, setcolumncount, getrowcount, setrowcount, getpickliststyle, setpickliststyle, getwordbreak,

setwordbreak, getwordellipsis, setwordellipsis가 있다.

템플릿 위치: /HTML5/COMPONENT/RADIOGROUP/radiogroup_basic

템플릿 파일

• radiogroup_basic.xml
• radiogroup_basic.js
• 새창으로 실행

var arrRadioAlign = [];
var arrTextAlign = [];

function screen_on_load()
{
	radiogroup04.addstring("data01:comment01");
	radiogroup04.addstring("data02:comment02");
	radiogroup04.addstring("data03:comment03");


	arrRadioAlign = [tg_left_top,	tg_center_top,	tg_right_top,
					 tg_left_center, tg_center_center, tg_right_center,
					 tg_left_bottom, tg_center_bottom, tg_right_bottom];
	arrRadioAlign[3].setstate(true);
	arrTextAlign = [tg_left_top_text,	tg_center_top_text,	tg_right_top_text,
					 tg_left_center_text, tg_center_center_text, tg_right_center_text,
					 tg_left_bottom_text, tg_center_bottom_text, tg_right_bottom_text];
	arrTextAlign[3].setstate(true);
}

function tg_radio_align_on_click(objInst, bState)
{
	var nHAlign, nVAlign;
	for(var i=0; i<arrRadioAlign.length; i++)
	{
		if (arrRadioAlign[i] == objInst)
		{
			arrRadioAlign[i].setstate(true);
			nHAlign = parseInt(arrRadioAlign[i].gettext().substr(0,1), 10);
			nVAlign = parseInt(arrRadioAlign[i].gettext().substr(1,1), 10);

		}
		else
		{
			arrRadioAlign[i].setstate(false);
		}
	}

	radiogroup_align.setradiohorzalign(nHAlign);
	radiogroup_align.setradiovertalign(nVAlign);
}

function tg_text_align_on_click(objInst, bState)
{
	var nHAlign, nVAlign;
	for(var i=0; i<arrTextAlign.length; i++)
	{
		if (arrTextAlign[i] == objInst)
		{
			arrTextAlign[i].setstate(true);
			nHAlign = parseInt(arrTextAlign[i].gettext().substr(0,1), 10);
			nVAlign = parseInt(arrTextAlign[i].gettext().substr(1,1), 10);

		}
		else
		{
			arrTextAlign[i].setstate(false);
		}
	}

	radiogroup_align.settexthorzalign(nHAlign);
	radiogroup_align.settextvertalign(nVAlign);
}

function radiogroup01_on_itemchange(objInst, prev_value, curr_value, event_type)
{
	var strevent = "unknown";
	if (event_type == 1) { strevent = "user"; }
	else if (event_type == 2) { strevent = "api"; }
	else if (event_type == 3) { strevent = "xdataset"; }
	strevent += " (" + event_type + ")";

	console.log("on_itemchange [" + prev_value + "] => [" + curr_value + "] by " + strevent);
}

function radiogroup04_on_itemchange(objInst, prev_value, curr_value, event_type)
{
	var strevent = "unknown";
	if (event_type == 1) { strevent = "user"; }
	else if (event_type == 2) { strevent = "api"; }
	else if (event_type == 3) { strevent = "xdataset"; }
	strevent += " (" + event_type + ")";

	console.log("on_itemchange [" + prev_value + "] => [" + curr_value + "] by " + strevent);
}