Class: RadioGroup

(Version : 2.0.4)

WUX.RadioGroup

new RadioGroup

라디오를 그룹으로 구성하는 컴포넌트입니다.
여러개의 라디오 중 선택된 라디오의 값을 value로 반환합니다.
라디오를 동시에 제어 할 수 있습니다.

Extends

Mixes In

Property
String
id

컴포넌트의 고유 식별자입니다. 하나의 Window 컴포넌트 내에서는 동일한 ID를 사용할 수 없습니다. 영문, 숫자를 조합하여 사용합니다.

Properties:
Name Type Description
id String id 설정
Example
 <button id="testID" />
inherited from
AbstractComponent
String
userData

서버로 전송되지않는 데이터 입니다. 컴포넌트에 임의의 데이터를 저장합니다.,

Properties:
Name Type Description
id String userData 설정
Example
 <button userData="T" />
inherited from
AbstractComponent
String
caption

컴포넌트의 텍스트를 설정합니다.

Properties:
Name Type Description
캡션 String 텍스트
Example
 <w:inputText caption="WUX.EMPTY_TEXT"/>
inherited from
AbstractUIComponent
Boolean
disabled

컴포넌트의 비활성화 여부를 설정합니다.

Properties:
Name Type Description
비활성화 Boolean 여부
Example
 <w:inputText disabled="false"/>
inherited from
AbstractUIComponent
Boolean
disableOnClick

버튼이 비활성화(disabled) 되어 있을때, 기본적으로 onClick이벤트가 발생하지 않지만 disableOnClick을 true 로 활성화 하면, onClick 이벤트를 발생시키도록 할 수 있습니다.

Properties:
Name Type Description
적용여부 Boolean
Example
<w:button caption="button" disableOnClick="true" />
inherited from
AbstractUIComponent
String
height

컴포넌트의 높이를 설정합니다.

Properties:
Name Type Description
컴포넌트의 String 높이
Example
 <fieldPanel height="1ft"/>
inherited from
AbstractUIComponent
String
styleName

컴포넌트의 스타일을 변경합니다. 컨테이너컴포넌트는 아래의 스타일속성을 갖고 있습니다. - plain : 선 형태의 스타일 - light : 기본적인 스타일 - round : Round 형태의 스타일

Properties:
Name Type Description
스타일 String 이름
Example
 <w:fieldPanel styleName="light"/>
inherited from
AbstractUIComponent
Boolean
visible

컴포넌트의 화면 표시 상태를 설정합니다.

Properties:
Name Type Description
보임/숨김 Boolean 여부
Example
 <w:inputText visible="true"/>
inherited from
AbstractUIComponent
String
width

컴포넌트의 넓이를 설정합니다.

Properties:
Name Type Description
컴포넌트의 String 넓이
Example
 <fieldPanel width="1ft"/>
inherited from
AbstractUIComponent
String
backgroundStyle

컨테이너의 Background CSS Style을 직접 지정합니다. 배경색을 변경하거나, 배겨 이미지를 활용 할 때 사용합니다.

Properties:
Name Type Description
CSS String
Example
 <panel backgroundStyle="#fff" ></panel> // 배경색
 <panel backgroundStyle="url(/images/bg.gif) repeat-x" ></panel> // 배경 이미지
inherited from
AbstractComponentContainer
String
layout

컴포넌트들이 배치되는 방법을 설정합니다.
 - vertical : 세로로배치
 - horizontal : 가로배치
 - column : 컬럼단위 배치
   - 컬럼은 부가적인 속성이 필요하므로 layoutConfig를 추가로 작성합니다.
   - 예) < w:layoutConfig type="column" sizes="1ft,1ft,1ft" />

Properties:
Name Type Description
layout String 레이아웃 설정
Example
  <w:fieldPanel layout="vertical" ></panel>
inherited from
AbstractComponentContainer
Object
layoutConfig

레이아웃의 상세한 속성 및 부가 속성을 기술합니다. - Vertical, Horizontal 일때는 생략할 수 있습니다. - column 레이아웃에서는 sizes는 컬럼의 사이즈를 설정하고 ","로 구분하여 다수의 컬럼을 설정 할 수 있습니다.

Properties:
Name Type Description
layoutConfig Object 레이아웃 상세 속성 설정
Example
예) <w:layoutConfig type="column" sizes="1ft,1ft" />
inherited from
AbstractComponentContainer
Boolean
padding

컨텐츠 영역의 내부 간격을 지정합니다. - Boolean 형식은 Global Config 의 값을 사용합니다. - 숫자 형식은 실제 간격의 크기를 변경합니다. 기본은 false입니다.

Properties:
Name Type Description
padding Boolean 내부 간격 설정
Example
예) <w:fieldPanel padding="true">
inherited from
AbstractComponentContainer
Boolean
spacing

컴포넌트들의 사이에 일정한 간격을 유지하는 기능을 설정합니다. - Boolean 형식은 Global Config 의 값을 사용합니다. - 숫자 형식은 실제 간격의 크기를 변경합니다. 기본은 true입니다.

Properties:
Name Type Description
spacing Boolean 컴포넌트 사이의 간격 설정
Example
예) <w:fieldPanel sapcing="true">
inherited from
AbstractComponentContainer
String
labelAlign

레이블의 정렬 방법을 지정합니다.

Properties:
Name Type Description
레이블 String 정렬
inherited from
FieldContainer
Number
labelWidth

컨테이너 내부의 모든 필드(Input, Select 등) 컴포넌트의 레이블 너비를 일괄 적용합니다. 단, 컴포넌트에 직접 정의된 값이 있을경우, 우선순위는 컴포넌트가 더 높습니다. 고정 사이즈 숫자값을 입력해야 합니다.

Properties:
Name Type Description
레이블의 Number 넓이
inherited from
FieldContainer
String
label
Properties:
Name Type Description
label String
inherited from
FieldGroup
Method
void
addEvent
     옵저버에 구독할 이벤트를 등록합니다.
Parameters:
Name Type Description
type String 이벤트 타입
fn Function 콜백함수
context Object 컨텍스트
inherited from
Observer
void
removeEvent
     옵저버에 등록된 이벤트를 삭제합니다
Parameters:
Name Type Description
type String 타입
args String 파라미터
context String 컨텍스트
inherited from
Observer
boolean
triggerEvent
     옵저버에 등록된 이벤트를 발생시킵니다.
     등록된 다른 모든 리스너에 이벤트가 전달됩니다.
Parameters:
Name Type Description
type String 타입
args String 파라미터
Returns:
Type
boolean
inherited from
Observer
String
getCx
컴포넌트 객체가 어떤 컴포넌트인지 판별할 수 있는 문자열을 반환합니다.
Returns:
컴포넌트 식별 문자
Type
String
Example
 //Button Component var compCx =
         WUX.getComponent('comp').getCx(); // Button
inherited from
AbstractComponent
String
getId
컴포넌트의 id(식별자)를 반환합니다.
Returns:
컴포넌트 Id
Type
String
Example
 var idComp = WUX.getComponent('comp').getId();
inherited from
AbstractComponent
Component
getParent
부모 컴포넌트를 반환합니다.
Returns:
부모 컴포넌트
Type
Component
Example
 var parentComp = WUX.getComponent('comp').getParent();
inherited from
AbstractComponent
String or Object
getUserData
    컴포넌트에 저장되어 있는 사용자 정의 데이터를 반환합니다.
    map 객체로 저장되 어있을경우 key를 넘기면 해당 key의 value만 반환합니다.
Parameters:
Name Type Description
key String 맵으로 입력되었을 경우의 key 값
Returns:
userData 사용자 정의 데이터
Type
String or Object
Example
 WUX.getComponent('comp').getUserData('key'); // return 맵의 키에
         해당하는 값 WUX.getComponent('comp').getUserData(); // return Object
inherited from
AbstractComponent
Component
getWindow
대상 컴포넌트가 포함된 Window 컴포넌트를 반환합니다.
Returns:
컴포넌트
Type
Component
Example
 var windowComp = WUX.getComponent('comp').getWindow();
inherited from
AbstractComponent
String or Object
setUserData
    컴포넌트에 사용자 정의데이터를 세팅합니다.
    서버로 전송되지 않습니다.
Returns:
userData 사용자 정의 데이터
Type
String or Object
Example
 WUX.getComponent('comp').setUserData('aa');
         WUX.getComponent('comp').setUserData('key', 'value');
         WUX.getComponent('comp').setUserData({key:'value',key2:'value'});
inherited from
AbstractComponent
void
addClass
컴포넌트에 선언 되어있는 CSS Class를 추가합니다.
Parameters:
Name Type Description
CSSClass String
Example
 WUX.getComponent('comp').addClass('user-css');
inherited from
AbstractUIComponent
String
getCaption
현재의 캡션 텍스트를 반환합니다.
Returns:
캡션 텍스트
Type
String
Example
 WUX.getComponent('comp').getCaption();
inherited from
AbstractUIComponent
String
getHeight
컴포넌트의 높이를 반환합니다.
Returns:
컴포넌트 높이
Type
String
Example
 var height = WUX.getComponent('comp').getHeight();
inherited from
AbstractUIComponent
String
getWidth
컴포넌트의 넓이를 반환합니다.
Returns:
컴포넌트 넓이
Type
String
Example
 var width = WUX.getComponent('comp').getWidth();
inherited from
AbstractUIComponent
void
hasClass
컴포넌트에서 동일한 CSS Class를 갖고 있는지를 확인합니다..
Parameters:
Name Type Description
CSSClass String
Example
 if(WUX.getComponent('comp').hasClass('user-css')){ //hasClass }
inherited from
AbstractUIComponent
Boolean
isDisabled
컴포넌트의 비활성화 여부를 반환합니다.
Returns:
비활성화 여부
Type
Boolean
Example
 WUX.getComponent('comp').isDisabled();
inherited from
AbstractUIComponent
Boolean
isDisableOnClick
비활성화일때 클릭 가능한지 여부를 반환합니다.
Returns:
비활성화 클릭 가능여부
Type
Boolean
Example
     WUX.getComponent('comp').isDisableOnClick();
inherited from
AbstractUIComponent
Boolean
isVisible
컴포넌트의 화면 표시 여부를 반환합니다.
Returns:
화면표시 여부
Type
Boolean
Example
 WUX.getComponent('comp').isVisible();
inherited from
AbstractUIComponent
void
removeClass
컴포넌트에서 동일한 CSS Class를 삭제합니다.
Parameters:
Name Type Description
CSSClass String
Example
 WUX.getComponent('comp').removeClass('user-css');
inherited from
AbstractUIComponent
void
setCaption
캡션 텍스트를 변경합니다.
Example
 WUX.getComponent('comp').setCaption('캡션');
inherited from
AbstractUIComponent
void
setDisabled
컴포넌트의 활성화/비활성화를 변경합니다.
Parameters:
Name Type Description
비활성화 Boolean 여부
Example
 WUX.getComponent('comp').setDisabled(true);
inherited from
AbstractUIComponent
void
setDisableOnClick
비활성화일때 클릭 가능한지 여부를 변경합니다.
Parameters:
Name Type Description
disableOnClick Boolean 비활성화 여부
Examples
     WUX.getComponent('comp').setDisableOnClick(false) // 이벤트 발생안함
     WUX.getComponent('comp').setDisableOnClick(true) // 이벤트 발함
     WUX.getComponent('comp').setDisableOnClick(false) // 이벤트 발생안함
     WUX.getComponent('comp').setDisableOnClick(true) // 이벤트 발함
inherited from
AbstractUIComponent
void
setHeight
컴포넌트의 높이를 변경합니다.
Parameters:
Name Type Description
컴포넌트 String or Number 높이
Example
 WUX.getComponent('comp').setHeight(200);
inherited from
AbstractUIComponent
void
setLabelAlign
레이블의 Align을 설정합니다. (left, right, center)_(top,bottom, center) 식으로 표현이 가능하며 앞 부분은 좌,우 정렬, 뒷 부분은 위, 아래의 정렬을 하고 단일 center의 입력도 가능하다.
Example
 WUX.getComponent('comp').setLabelAlign('center_center');
inherited from
AbstractUIComponent
void
setSizeFull
컴포넌트를 넓이, 높이 모두 Fit 합니다.
Example
 WUX.getComponent('comp').setSizeFull();
inherited from
AbstractUIComponent
void
setVisible
컴포넌트의 화면 표시 여부를 변경합니다.
Parameters:
Name Type Description
화면표시여부 Boolean
Example
 WUX.getComponent('comp').setVisible(true);
inherited from
AbstractUIComponent
void
setWidth
컴포넌트의 넓이를 변경합니다.
Parameters:
Name Type Description
컴포넌트 String or Number 넓이
Example
 WUX.getComponent('comp').setWidth(200);
inherited from
AbstractUIComponent
Array
validate
컴포넌트가 갖고 있는 rule이 있다면 바인딩되어 있는 ValueObject를 통해 이를 체크하여 invalid를 반환한다.
또한 WUX.data.ValueObject.onEndValidate와 ValueObject 인스턴스의 onInvalid 이벤트를 실행시켜준다.
단, 바인딩 되어 있지 않은 컴포넌트는 체크를 수행하지 않는다.
Returns:
of WUX.Invalid
Type
Array
inherited from
AbstractUIComponent
void
componentIterator
자신의 하위 컴포넌트 또는 자신의 모든 하위 컴포넌트를 Iterate 할 수 있습니다. - callback에서 Component 객체를 파라미터로 전달합니다. - 첫번째 파라미터는 callback 함수 - 두번째 파라미터에서 true를 사용할 경우 모든 하위 컴포넌트를 탐색합니다.
Parameters:
Name Type Description
필터 Function
하위의 Boolean 모든 컴포넌트 열거 여부
Example
     // 자신의 하위만 탐색
     WUX.getComponent('comp').componentIterator(function(comp){
         var id = comp.getId();
     });
     // 하위의 모든 컴포넌트 탐색
     WUX.getComponent('comp').componentIterator(function(comp){
         var id = comp.getId();
     }, true);
inherited from
AbstractComponentContainer
Number
getContentHeight
컴포넌트 컨텐츠 영역의 높이를 반환합니다.
Returns:
컨텐츠의 높이
Type
Number
Example
     WUX.getComponent('comp').getContentHeight();
inherited from
AbstractComponentContainer
Number
getContentWidth
컴포넌트 컨텐츠 영역의 넓이를 반환합니다.
Returns:
컨텐츠의 넓이
Type
Number
Example
     WUX.getComponent('comp').getContentWidth();
inherited from
AbstractComponentContainer
String
getLabel
Returns:
레이블
Type
String
Example
     var label = WUX.getComponent('comp').getLabel();
inherited from
FieldGroup
void
setLabel
레이블의 텍스트를 변경합니다.
Parameters:
Name Type Description
레이블 String 텍스트
Example
     var tabIndex = WUX.getComponent('comp').setLabel('레이블');
inherited from
FieldGroup
Events
onBeforeHidden

컴포넌트가숨겨지기이전에발생하는
이벤트입니다.

Example
 <button onBeforeHidden="onBeforeHidden" userData="param1" >
inherited from
AbstractUIComponent
onBeforeVisible

컴포넌트가숨김상태에서보여지기이전에발생하는 이벤트 입니다.

Example
 <button onBeforeVisible="onBeforeVisible" userData="param1" >
inherited from
AbstractUIComponent
onClick

컴포넌트를 클릭 했을 때
발생하는 이벤트입니다.

Example
 <button onClick="onClick" value="param1" >
inherited from
AbstractUIComponent
onHidden

컴포넌트가숨겨지고난이후에발생하는 이벤트 입니다.

Example
 <button onHidden="onHidden" userData="param1" >
inherited from
AbstractUIComponent
onVisible

컴포넌트가숨김상태에서보여지고난이후에 발생하는 이벤트 입니다.

Example
 <button onVisible="onVisible" userData="param1" >
inherited from
AbstractUIComponent