개요

ListView 는 Dataset 의 내용을 아이템 단위로 표현하는 컴포넌트입니다.

지원 환경

- ListView 는 항상 Dataset 과 바인딩하여 사용합니다. 
   Dataset 에 변경 사항이 생기면 ListView 에 반영되고, 반대로 ListView 에 변경 사항이 생기면 Dataset 에 반영됩니다. 

- ListView 는 Body, Detail 영역의 밴드로 구성되며, 각 밴드는 Cell 을 기본 단위로 구성됩니다.
   바인드 된 Dataset 의 Column 과 각 Cell 을 맵핑해서 사용할수 있습니다.
   Cell 은 Combo, CheckBox, Image, ProgressBar, Edit 등의 컨트롤을 포함 할 수 있어 다양한 디자인 및 편집이 가능합니다.

- Body, Detail 밴드는 바인딩된 Dataset 의 레코드를 보여줍니다.
   ContentsEditor 를 통해서 디자인한 Body, Detail 밴드의 아이템은 Dataset 의 한 레코드와 맵핑됩니다.
   즉, Dataset 의 한 레코드를 보기 쉽게 표현하려면 ListView 의 Body, Detail 밴드로 나누어 구성할 수 있습니다.

- Cell 이 Edit, TextArea, Combo 형식이고 편집창이 활성화 상태일때 일본어 IME 로 일본어 입력(조합중이고 확정이 안된 상태)중이면 붙여넣기 기능이 동작하지 않습니다.

컴포넌트 구조

Basic Key Action

Accessibility Key Action

접근성 기능이 활성화 되어 있을 때 적용되는 키 액션입니다.

생성자

ListView.init( strName, vLeft, vTop , vWidth, vHeight [, vRight, vBottom, [vMinWidth, [vMaxWidth, [vMinHeight, [vMaxHeight]]]]] )

var objComp = new ListView();

objComp.init( "ListView00", 30, 120, 196, 46 );
objComp.init( "ListView00", 30, 120, 196, 46, null, null );
objComp.init( "ListView00", null, null, 300, "400px", "80%", 300 );
objComp.init( "ListView00", 0, 0, 200, 100, null, null, 300, 500, 200, 500 );
objComp.init( "ListView00", "ListView22:10", 300, null, null, "ListView33:10", "20%", 300, 500, 200, 500 );

// Create Object  
var objListView = new ListView();  
objListView.init("ListView", 30, 120, 196, 46, null, null);
objListView.init("ListView", null, null, 300, "400px", "80%", 300);
or
var objListView = new ListView("ListView", 30, 120, 196, 46, null, null);
var objListView = new ListView("ListView", null, null, 300, "400px", "80%", 300);
 
// Add Object to Parent Form  
this.addChild("ListView", objListView); 
 
// Insert Object to Parent Form  
this.insertChild(1, "ListView", objListView); 
 
// Remove Object form Parent Form  
this.removeChild("ListView"); 
 
// Show Object  
objListView.show(); 
 
// Destroy Object  
objListView.destroy(); 
objListView = null;

Status

Control

속성

accessibilityaction

ListView에 선택상자 이동 시 accessibilitydescreadtype 속성에 따라 스크린 리더의 음성 출력 대상으로 포함할 action 정보를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.accessibilityaction[= strAction]

문법 설정

this.ListView00.accessibilityaction = "Accessibility Action Message"; 
this.ListView00.accessibilityaction = "Select by direction key";

참고

- enableaccessibility 속성값이 true 인 경우만 적용되는 속성입니다.

- 컴포넌트에 선택상자 이동 시 사용자가 추가적인 정보를 얻기 위해 필요한 동작을 안내하는 용도로 사용합니다. 
  예를 들어 컴포넌트 특성에 따라 다음과 같이 속성값을 설정할 수 있습니다.
  
  - CheckBox 컴포넌트의 경우 아래와 같은 안내문을 accessibilityaction 속성값으로 설정할 수 있습니다.
  "선택 상태를 전환하려면 스페이스 바를 누릅니다."
  
  - WebBrowser, WebView 컴포넌트의 경우 스크린 리더 사용자를 위한 안내문을 accessibilityaction 속성값으로 설정할 수 있습니다.
  "웹 브라우저 컴포넌트 내 콘텐츠를 이용하기 위해서는 가상커서를 해제해 주세요."
  그리고 WebBrowser, WebView 컴포넌트를 벗어났을 때 필요한 안내문을 accessibilityleavemessage 속성값으로 설정합니다.
  "가상커서를 설정해 주세요"

accessibilitydesclevel

ListView 에 선택상자 이동 시 하위 컴포넌트의 접근성 출력여부를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.accessibilitydesclevel[= enumLevel]

문법 설정

enumLevel ::= 'all' | 'self' | 'child' | 'none'

this.ListView00.accessibilitydesclevel = "all";

참고

- accessibilitydesclevel 속성값을 설정하지 않으면 "all" 로 적용됩니다.

- Button 과 같이 자식 컴포넌트가 없는 컴포넌트는 "all" 또는 "child" 로 설정 시 "self" 로 적용됩니다.

- Div 와 같은 컨테이너 컴포넌트는 "child" 설정 시 실제 컨텐츠의 접근성만을 출력합니다.

- accessibilitydesclevel 속성은 선택상자의 이동에 영향을 주지 않으므로 방향키로 선택상자가 ListView 에 이동되게 하지 않으려면 accessibilityenable 속성을 설정하여야 합니다.

accessibilitydescription

ListView에 선택상자 이동 시 accessibilitydescreadtype 속성에 따라 스크린 리더의 음성 출력 대상으로 포함할 description 정보를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.accessibilitydescription[= strDescription]

문법 설정

this.ListView00.accessibilitydescription = "Option";

참고

- enableaccessibility 속성값이 true 인 경우만 적용되는 속성입니다.

accessibilityenable

ListView 에 선택상자 이동 시 접근성 관련 속성값 출력여부를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.accessibilityenable[= bEnable]

문법 설정

bEnable ::= 'true' | 'false'

this.ListView00.accessibilityenable = false;

참고

- accessibilityenable 속성값을 설정하지 않으면 true 로 적용됩니다.

- enableaccessibility 속성값이 true 인 경우만 적용되는 속성입니다.

- 선택상자 이동 시 컴포넌트의 ARIA-LABEL + Status + Role 순서로 정보가 조합되어 접근성으로 출력됩니다.
   각 정보의 조합순서는 스크린 리더의 종류에 따라 달라질 수 있습니다.
   > ARIA-LABEL : Environment 의 accessibilitydescreadtype 속성에 설정된 속성값이 반영됩니다.
   > Status : ListView 의 현재 상태가 반영됩니다.
   > Role : accessibilityrole 속성값이 반영됩니다. accessibilityrole 속성값을 설정하지 않으면 ListView 의 고유 Role 이 반영됩니다.

- accessibilityenable 속성값이 false 일 때 데스크탑 환경에서 방향키 외의 방법으로 선택상자를 ListView 로 이동시키면 스크린 리딩 프로그램에서 임의의 값을 출력할 수 있습니다.


◆ 컨테이너 컴포넌트 선택상자 이동 제약

아래와 같은 환경에서 컨테이너 컴포넌트로 선택상자가 이동하지 않고 컨테이너 컴포넌트 내에 배치된 컴포넌트로 이동합니다.
- Android, iOS/iPadOS 운영체제에서 실행 시 (Div, PopupDiv, TabpageControl, View)
- Windows 운영체제에서 센스리더 가상커서 사용 시 (Div, PopupDiv, View)

accessibilitylabel

ListView에 선택상자 이동 시 accessibilitydescreadtype 속성에 따라 스크린 리더의 음성 출력 대상으로 포함할 label 정보를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.accessibilitylabel[= strLabel]

문법 설정

this.ListView00.accessibilitylabel = "OK Button"; 
this.ListView00.accessibilitylabel = "[@static00]"; 
this.ListView00.accessibilitylabel = "[@static00][@static01]"; 
this.ListView00.accessibilitylabel = "[@static00][@static01] OK Button";

참고

- enableaccessibility 속성값이 true인 경우만 적용되는 속성입니다.

- accessibilitydescreadtype 속성값에 "label"이 포함되었으나 accessibilitylabel 속성값을 설정하지 않으면 스크린 리더의 음성 출력 대상에 포함하지 않습니다.

accessibilityrole

ListView에 선택상자 이동 시 스크린 리더가 읽어주는 Role 정보를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.accessibilityrole[= enumRole]

문법 설정

enumRole ::= 'none' | 'alert' | 'application' | 'button' | 'calendar' | 'chart' | 'checkbox' | 'columnheader' | 'combobox' | 'datepicker' | 'edit' | 'fileupload' | 'form' | 'frame' | 'grid' | 'gridcell' | 'groupbox' | 'heading' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'image' | 'link' | 'listbox' | 'menubar' | 'progressbar' | 'radio' | 'rowheader' | 'scrollbar' | 'spin' | 'static' | 'statusbar' | 'tab' | 'tabpage' | 'textarea' | 'titlebar' | 'toolbar' | 'tooltip' | 'treegrid' | 'treeitem' | 'webbrowser'

this.ListView00.accessibilityrole = "none"; 
this.ListView00.accessibilityrole = "button";

참고

- enableaccessibility 속성값이 true 인 경우만 적용되는 속성입니다.

- accessibilityenable 속성값을 설정하지 않으면 ListView의 기본 Role 로 적용됩니다.

- 추가적인 속성값이 필요한 Role 설정 시 ListView에 해당 속성이 없으면 스크린 리더에 따라 정상적으로 정보를 읽지 못할 수 있습니다.

autoenter

ListView 에서 편집이 가능한 Cell 이 선택되었을 때 편집모드용 컨트롤이 활성화 되는 방법을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.autoenter[= enumType]

문법 설정

enumType ::= 'none' | 'select' | 'key'

this.ListView00.autoenter = "key";

참고

- autoenter 속성값을 설정하지 않으면 "none" 으로 적용됩니다.

- Cell 의 edittype 속성값에 따라 표시되는 편집모드용 컨트롤의 종류가 달라집니다.

- 마우스로 Cell 을 클릭하거나 키보드의 방향키를 입력(ListView 가 포커스 되어 있을 때)하면 Cell 이 선택된 상태가 됩니다.   

- Cell 이 선택되어 있을 때 showEditor() 메소드를 사용하여 편집모드용 컨트롤을 활성화 할 수 있습니다.

◆ web runtime environment 제약

- "key" 값일 때 기존값을 삭제한 후 편집모드용 컨트롤을 활성화하는 기능은 숫자와 알파벳만 지원합니다.
   다국어 문자 등 다른 문자의 경우 입력값과 다른값이 입력될 수 있습니다.

autoupdatetype

Cell이 Combo, MultiCombo, Calendar 중 하나의 형식일 때 팝업창으로 선택된 값이 Dataset 오브젝트에 적용되는 시점을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.autoupdatetype[= enumType]

문법 설정

enumType ::= 'none' | 'comboselect' | 'dateselect' | 'itemselect'

this.ListView00.autoupdatetype = "itemselect";

참고

- autoupdatetype 속성값을 설정하지 않으면 "none"으로 적용됩니다.

- Combo, MultiCombo, Calendar 형태로 값을 입력받으려면 Cell의 edittype 속성값을 "combo", "multicombo", "date"로 설정하여야 합니다.

- 팝업창에서 값을 선택하는 즉시 Dataset 오브젝트에 반영되는 경우 oncloseup 이벤트는 Dataset 오브젝트에 값이 반영된 후 발생합니다.

background

ListView 의 배경 영역을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.background[= strbackground]

문법 설정

strBackground ::= [<bg-image> | <linear-gradient>] [<background-origin> [<background-clip>]] [<background-color>]

<bg-image> ::= 'none' | <imageurl> [<repeat-style>] [<position>]
   <imageurl> ::= 'URL(' <Theme-Image> | <Web-Image> ')'
   <repeat-style> ::= 'repeat-x' | 'repeat-y' | 'repeat' | 'no-repeat'
   <position> ::= <horizontal-position> <vertical-position> ['/' <background-size>]
      <horizontal-position> ::= 'left' | 'center' | 'right' | <pos-percentage> '%'
      <vertical-position> ::= 'top' | 'center' | 'bottom' | <pos-percentage> '%'
      <background-size> ::= 'auto' | 'cover' | 'contain' | (<length> 'px' | <percentage> '%') {1,2}

<linear-gradient> ::= 'linear-gradient(' [<angle> , ] <color-stop> ')'
   <angle> ::= 'to left' | 'to right' | 'to top' | 'to bottom' | 'to left top' | 'to left bottom' | 'to right top' | 'to right bottom'
   <color-stop> ::= <startcolor-stop> [<listcolor-stop>] <endcolor-stop>
      <startcolor-stop> ::= <color> [<percentage>'%']
      <endcolor-stop> ::= <color> [<percentage>'%']
      <listcolor-stop> ::= <color> [<percentage>'%"] [,<listcolor-stop>]*
         <color> ::= <NamedColor> | <NumericColor>

<background-origin> ::= 'border-box' | 'padding-box'
<background-clip> ::= 'border-box' | 'padding-box'
<background-color> ::= <NamedColor> | <NumericColor>

* XCSS
background : #ffffaa;
background : "URL('./images/smiley.gif')" no-repeat center center #ffffaa;
background : "URL('./images/smiley.gif')" no-repeat center center /auto #ffffaa;
background : "URL('./images/smiley.gif')" no-repeat center center /15px 15% #ffffaa;
background : linear-gradient( red , blue , yellow );
background : linear-gradient( #FF0000 , rgb(0,0,255) , rgb(255,255,0));
background : "URL('./images/smiley.gif')" border-box border-box #ffffaa;

* Script ( normal property )
this.ListView00.background = "#ffffaa";
this.ListView00.background = ""URL('./images/smiley.gif')" no-repeat center center #ffffaa";
this.ListView00.background = ""URL('./images/smiley.gif')" no-repeat center center /auto #ffffaa";
this.ListView00.background = ""URL('./images/smiley.gif')" no-repeat center center /15px 15% #ffffaa";
this.ListView00.background = "linear-gradient( red , blue , yellow )";
this.ListView00.background = "linear-gradient( #FF0000 , rgb(0,0,255) , rgb(255,255,0))";
this.ListView00.background = ""URL('./images/smiley.gif')" border-box border-box #ffffaa";

참고

- background 속성값을 설정하지 않으면 undefined 가 설정되고, "transparent" 로 동작합니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.
   사용자 Prefix 는 스크립트 또는 넥사크로 스튜디오에서 속성값으로 설정 시 사용할 수 있습니다.

- 배경의 기준영역과 표시영역은 <background-origin>, <background-clip> 값으로 각각 설정합니다.

- 배경 이미지를 중앙에 위치시키려면 <position> 값을 "center" 또는 "center center" 로 설정하여야 합니다.

- 배경이미지와 배경색을 모두 설정하면 배경색 위에 이미지가 표시됩니다.
   그라데이션과 배경색을 모두 설정하면 배경색 위에 그라데이션이 표시됩니다.

- 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
   두 값을 동시에 설정 시 오동작이 발생할 수 있습니다.

bandexpandtype

ListView 에서 Detail 밴드가 표시되는 방법을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.bandexpandtype[= enumExpandType]

문법 설정

enumExpandType ::= 'none' | 'expand' | 'accordion' | 'popup'

this.ListView00.bandexpandtype = "popup";

참고

- bandexpandtype 속성값을 설정하지 않으면 "expand" 로 적용됩니다.

- Detail 밴드가 정의되어 있지 않으면 "none" 으로 동작합니다.

- Detail 밴드를 표시하거나 숨기려면 Body 밴드의 확장바 또는 showDetailBand(), hideDetailBand() 메소드를 사용하여야 합니다.
   ListView 의 아이템 선택으로 Detail 밴드가 표시되거나 숨겨지지 않습니다.

활용 예제

• 기본, 상세 데이터 표현하기

bandindentsize

ListView 에서 Detail 밴드가 표시될 때 왼쪽 여백의 너비를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.bandindentsize[= nIndentSize]

문법 설정

this.ListView00.bandindentsize = 20;

참고

- 표시되는 Detail 밴드에 모두 적용됩니다.

활용 예제

• 기본, 상세 데이터 표현하기

bandinitstatus

bandexpandtype 속성값이 "expand" 일 때 Detail 밴드의 최초 표시상태를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.bandinitstatus[= enumBandInit]

문법 설정

enumBandInit ::= 'expand' | 'collapse'

this.ListView00.bandinitstatus = "collapse";

참고

- bandinitstatus 속성값을 설정하지 않으면 "expand" 로 적용됩니다.

- bandexpandtype 속성값이 "expand" 인 경우만 적용되는 속성입니다.

binddataset

ListView 의 전체 Cell 과 바인드 되는 DataSet 의 ID 를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.binddataset[= strDatasetID]

문법 설정

this.ListView00.binddataset = "Dataset00";

참고

- ListView 에서 선택된 아이템을 변경하면 DataSet 의 rowposition 속성값이 변경됩니다.
   반대로 DataSet 의 rowposition 속성값을 변경하면 ListView 에 선택된 아이템이 변경됩니다.

- ListView 에서 Cell 의 내용을 변경하면, 바인딩 된 DataSet 의 해당 컬럼 데이터값도 변경됩니다.

- binddataset 속성에 설정된 DataSet 이 존재하지 않을 경우 ListView 에 데이터가 표시되지 않습니다.

border-radius

ListView 의 모서리 모양을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.borderRadius[= strborderradius]

문법 설정

strborderradius ::= <horizontal-radius>{4} ['/' <vertical-radius>{4}]

* XCSS
border-radius : 10px;
border-radius : 5px 6px 10px / 5px 10px;

* Script ( normal property )
this.ListView00.borderRadius = "10px";
this.ListView00.borderRadius = "5px 6px 10px / 5px 10px";

참고

- border-radius 속성값을 설정하지 않으면 undefined 가 설정되고, "0px" 로 동작합니다. 

- 스크립트로 접근 시 속성명은 "borderRadius" 를 사용해야 합니다.

- <horizontal-radius>와 <vertical-radius>는 "/" 문자로 구분하여 입력합니다.

- Calendar, Combo 와 같이 하위 컨트롤이 존재하는 컴포넌트는 하위컨트롤에도 border-radius 속성을 설정해야 정상적으로 모서리가 표시됩니다.


◆ NRE 제약

- border-radius 속성을 설정하면 모든 테두리가 같은 색으로 적용됩니다.
   -nexa-border 속성에서 top 에 적용된 색이 모든 테두리에 적용됩니다.

bottom

ListView 을(를) 표시하기 위한 하단 좌표값을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.bottom[= nBottom]

문법 설정

nBottom ::= [<strCompID> ':'] <nVal> ['px' | '%' | 'em' | 'rem']

this.ListView00.bottom = 10; 
this.ListView00.bottom = "10px"; 
this.ListView00.bottom = "10%"; 
this.ListView00.bottom = "Button00:10px"; 
this.ListView00.bottom = "Button00:10%";

참고

- 좌표값에 단위를 생략할 경우 pixel 값으로 적용됩니다.

- 좌표값에 기준 컴포넌트 또는 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

◆ 기준 컴포넌트 설정 시 유의할 점

- 속성값을 기준 컴포넌트(<strCompID>)를 참조하도록 설정한 경우 다음 사항을 유의해주세요.

스크립트로 속성값에 설정한 기준 컴포넌트 값(<strCompID>)을 변경하는 경우 유효한 컴포넌트 값이 아니면(잘못된 컴포넌트 id, 부모 또는 stepindex가 다른 컴포넌트) 기준 컴포넌트 값은 무시하고 부모를 기준으로 좌표값(<nVal>)을 적용합니다.
스크립트로 기준 컴포넌트의 크기나 위치 속성값을 변경되는 경우(속성값에 영향을 주는 메소드 실행으로 인한 변경 포함) 변경된 속성값이 기준 컴포넌트를 참조하는 컴포넌트에 바로 반영되지 않습니다.
예를 들어 Button01 컴포넌트의 left 속성값이 "Button00:10px"인 경우 스크립트로 Button00 컴포넌트의 right 속성값이 변경하더라도 Button01 컴포넌트의 위치는 변경되지 않습니다.
기준 컴포넌트의 크기나 위치 속성값이 변경된 것을 기준 컴포넌트를 참조하는 컴포넌트에 반영하려면 스크립트에서 기준 컴포넌트의 크기나 위치 속성값 변경 후 Form 오브젝트의 resetScroll 메소드를 실행해주어야 합니다.

cellcalendarbuttonsize

Cell 이 Calendar 형식일 때 표시되는 드롭다운 버튼의 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cellcalendarbuttonsize[= strSize]

문법 설정

strSize ::= <strWidth> [ ' ' <strHeight> ]

this.ListView00.cellcalendarbuttonsize = "30"; 

this.ListView00.cellcalendarbuttonsize = "30 20";

참고

- cellcalendarbuttonsize 속성값을 설정하지 않으면 Cell 의 내부 컨트롤 높이가 적용됩니다.

- Cell 의 calendarbuttonsize 속성값을 설정하지 않으면 ListView 의 cellcalendarbuttonsize 속성값이 적용됩니다.

- <strWidth> 값과 <strHeight> 값은 공백문자로 구분하여 문자열로 설정합니다.

cellcalendarpopupsize

Cell 이 Calendar 형식일 때 팝업으로 표시되는 달력의 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cellcalendarpopupsize[= strSize]

문법 설정

strSize ::= <strWidth> [ ' ' <strHeight> ]

this.ListView00.cellcalendarpopupsize = "500 400";

참고

- cellcalendarpopupsize 속성값을 설정하지 않으면 undefined 로 적용됩니다.
   undefined 로 설정되면 팝업달력(DatePicker)의 너비와 높이는 각각 "220", "200" 으로 적용됩니다.

- Cell 의 calendarpopupsize 속성값을 설정하지 않으면 ListView 의 cellcalendarpopupsize 속성값이 적용됩니다.

- <strWidth> 값과 <strHeight> 값은 공백문자로 구분하여 문자열로 설정합니다.

cellcalendarpopuptype

Cell 이 Calendar 형식일 때 팝업달력(DatePicker)이 표시되는 방식을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cellcalendarpopuptype[= enumType]

문법 설정

enumType ::= 'none' | 'normal' | 'center' | 'system'

this.ListView00.cellcalendarpopuptype = "system";

참고

- popuptype 속성값을 설정하지 않으면 undefined 로 적용됩니다.
   undefined 일 경우 데스크탑 환경은 "normal" 로 동작되고, 모바일 환경은 "system" 으로 동작됩니다.

- Cell 의 calendarpopuptype 속성값을 설정하지 않으면 ListView 의 cellcalendarpopuptype 속성값이 적용됩니다.

- calendartype 속성값이 "normal" 일때만 적용되며 모바일환경 같은 특별한 경우에 제한적으로 사용해야 하는 속성입니다.

- 다중 모니터의 경우 ListView 가 표시되고 있는 모니터를 기준으로 팝업달력이 표시됩니다.

cellcheckboxsize

Cell 이 CheckBox 형식일 때 CheckBox 의 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cellcheckboxsize[= nSize]

문법 설정

this.ListView00.cellcheckboxsize = 20;

참고

- Cell 의 edittype 속성값이 "checkbox" 일 때 Cell 에 표시되는 CheckBox 에 적용됩니다.
   Cell 의 displaytype 속성값이 "checkboxcontrol" 일 때 Cell 에 표시되는 CheckBox 에 적용됩니다.

- cellcheckboxsize 속성값을 설정하지 않으면 테마에 정의된 CheckBox 이미지 크기에 맞게 적용됩니다.

- Cell 의 checkboxsize 속성을 설정하지 않으면 ListView 의 cellcheckboxsize 속성값이 적용됩니다.

- 테마에서 CheckBox 이미지 크기는 ListViewCellControl 하위의 cellcheckbox 셀렉터에 정의됩니다.

- 테마에 정의된 CheckBox 이미지 크기보다 cellcheckboxsize 속성값을 작게 설정할 경우 이미지가 잘려서 표시됩니다.

cellclickbound

CheckBox 형식의 Cell 에서 마우스 클릭에 의해 값이 변경되는 영역을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cellclickbound[= enumBound]

문법 설정

enumBound ::= 'control' | 'cell'

참고

- cellclickbound 속성값을 설정하지 않으면 "control" 로 적용됩니다.

- edittype 속성값이 "checkbox" 이고, displaytype 속성값이 "checkboxcontrol" 일 경우만 적용되는 속성입니다.

cellcombobuttonsize

Cell 이 Combo 형식일 때 표시되는 드롭다운 버튼의 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cellcombobuttonsize[= strSize]

문법 설정

strSize ::= <strWidth> [ ' ' <strHeight> ]

this.ListView00.cellcombobuttonsize = "30"; 

this.ListView00.cellcombobuttonsize = "30 20";

참고

- cellcombobuttonsize 속성값을 설정하지 않으면 Cell 의 내부 컨트롤 높이가 적용됩니다.

- Cell 의 combobuttonsize 속성값을 설정하지 않으면 ListView 의 cellcombobuttonsize 속성값이 적용됩니다.

- <strWidth> 값과 <strHeight> 값은 공백문자로 구분하여 문자열로 설정합니다.

cellcombopopupsize

Cell 이 Combo 형식일 때 팝업으로 표시되는 아이템 리스트의 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cellcombopopupsize[= strSize]

문법 설정

strSize ::= <strWidth> [ ' ' <strHeight> ]

this.ListView00.cellcombopopupsize = "500 400";

참고

- cellcombopopupsize 속성값을 설정하지 않으면 undefined 로 적용됩니다.
   undefined 로 설정되면 아이템에 맞게 리스트의 크기가 자동으로 설정됩니다.

- Cell 의 combopopupsize 속성값을 설정하지 않으면 ListView 의 cellcombopopupsize 속성값이 적용됩니다.

- <strWidth> 값과 <strHeight> 값은 공백문자로 구분하여 문자열로 설정합니다.

cellcombopopuptype

Cell 이 Combo 형식일 때 아이템 리스트가 표시되는 방식을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cellcombopopuptype[= enumType]

문법 설정

enumType ::= 'none' | 'normal' | 'center'

this.ListView00.cellcombopopuptype = "center";

참고

- cellcombopopuptype 속성값을 설정하지 않으면 "normal" 로 적용됩니다.

- Cell 의 combopopuptype 속성값을 설정하지 않으면 ListView 의 cellcombopopuptype 속성값이 적용됩니다.

- 모바일환경 같은 특별한 경우에 제한적으로 사용해야 하는 속성입니다.

- 다중 모니터의 경우 ListView 가 표시되고 있는 모니터를 기준으로 아이템 리스트가 표시됩니다.

cellmulticombobuttonsize

Cell이 MultiCombo 형식일 때 표시되는 드롭다운 버튼의 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cellmulticombobuttonsize[= strSize]

문법 설정

strSize ::= <strWidth> [ ' ' <strHeight> ]

this.ListView00.cellmulticombobuttonsize = "30";
this.ListView00.cellmulticombobuttonsize = "30 20";

참고

- cellmulticombobuttonsize 속성값을 설정하지 않으면 Cell의 내부 컨트롤 높이가 적용됩니다.
   controlautosizingtype 속성값에 따라 드롭다운 버튼의 크기가 달라집니다.

- Cell의 multicombobuttonsize 속성값을 설정하지 않으면 ListView의 cellmulticombobuttonsize 속성값이 적용됩니다.

- <strWidth> 값과 <strHeight> 값은 공백문자로 구분하여 문자열로 설정합니다.

cellmulticombopopupsize

Cell 이 MultiCombo 형식일 때 팝업으로 표시되는 아이템 리스트의 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cellmulticombopopupsize[= strSize]

문법 설정

strSize ::= <strWidth> [ ' ' <strHeight> ]

this.ListView00.cellmulticombopopupsize = "500 400";

참고

- cellmulticombopopupsize 속성값을 설정하지 않으면 undefined로 적용됩니다.
   undefined로 설정되면 아이템에 맞게 리스트의 크기가 자동으로 설정됩니다.

- Cell의 multicombopopupsize 속성값을 설정하지 않으면 ListView의 cellmulticombopopupsize 속성값이 적용됩니다.

- <strWidth> 값과 <strHeight> 값은 공백문자로 구분하여 문자열로 설정합니다.

cellmulticombopopuptype

Cell이 MultiCombo 형식일 때 아이템 리스트가 표시되는 방식을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cellmulticombopopuptype[= enumType]

문법 설정

enumType ::= 'none' | 'normal' | 'center'

this.ListView00.cellmulticombopopuptype = "center";

참고

- cellmulticombopopuptype 속성값을 설정하지 않으면 "normal"로 적용됩니다.

- Cell의 multicombopopuptype 속성값을 설정하지 않으면 ListView의 cellmulticombopopuptype 속성값이 적용됩니다.

- 모바일환경 같은 특별한 경우에 제한적으로 사용해야 하는 속성입니다.

- 다중 모니터의 경우 ListView가 표시되고 있는 모니터를 기준으로 아이템 리스트가 표시됩니다.

color

ListView 에 표시되는 텍스트의 색상을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.color[= strcolor]

문법 설정

strcolor ::= <NamedColor> | <NumericColor>

* XCSS
color : #999999;
color : rgb ( 255, 0, 0 );
color : red;

* Script ( normal property )
this.ListView00.color = "#999999";
this.ListView00.color = "rgb(255,0,0)";
this.ListView00.color = "red";

참고

- color 속성값을 설정하지 않으면 undefined 가 설정되고, "#000000" 으로 동작합니다.


◆ web runtime environment 제약

- XCSS 를 사용하지 않고 rgba(), hsl(), hsla() 메소드를 속성에 직접 설정할 경우 브라우저 버전에 따라 적용되지 않을 수 있습니다.

createrowstype

ListView 컴포넌트 생성 시점에 Band 생성 방식을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.createrowstype [=enumType]

문법 설정

enumType ::= "auto" | "all"

this.Grid00.createrowstype = "all";

참고

- createrowstype 속성값을 설정하지 않으면 "auto"로 적용됩니다.

- createrowstype 속성값을 "all"로 설정한 경우 성능에 영향을 미칠 수 있습니다.
  접근성 지원 환경에서 스크린 리더가 Accessibility Tree 구성 시 전체 노드가 미리 생성되어야 하는 경우에만 성능에 미치는 영향을 인지하고 사용하는 것을 권장합니다.

- 스크립트에서 속성값 변경 시 Form 오브젝트의 resetScroll 메서드를 실행해 ListView 컴포넌트를 갱신해주어야 합니다.

cssclass

ListView 의 Style 을 XCSS 파일에 정의된 class 로 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cssclass[= strcssclass]

문법 설정

strcssclass ::= <ClassName> [ , &ltClassName> ]*

this.ListView00.cssclass = "TestClass"; 
this.ListView00.cssclass = "TestClass,TestClass2";

참고

- XCSS 에 정의된 ".classname" 형식에서 "." 를 제외하고 "classname" 만 설정합니다.

- Style 에 적용되는 방식은 XCSS Attribute 지정과 동일하게 XCSS 내의 순서대로 적용됩니다.

- Status 를 적용하고자 할 경우는 "classname" 에 Status 를 붙여서 사용합니다.

- ',' 를 사용하여 class 를 다중으로 지정하게 되면 class 가 중첩되어 적용됩니다.
   중첩된 class 의 내용에 중복이 있다면 XCSS 내의 순서상 마지막으로 기술된 것이 적용됩니다.


◆ web runtime environment 제약

- web runtime environment 는 cssclass 명의 첫문자가 숫자일 경우 속성값이 적용되지 않으므로 주의하여야 합니다.

cursor

ListView 영역에서 표시될 마우스 포인터의 종류를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.cursor[= strCursor]

문법 설정

strCursor ::= 'none' | 'auto' | 'default' | 'copy' | 'crosshair' | 'help' | 'move' | 'not-allowed' | 'pointer' | 'progress' | 'text' | 'wait' | 'ew-resize' | 'e-resize' | 'w-resize' | 'ns-resize' | 'n-resize' | 's-resize' | 'nesw-resize' | 'ne-resize' | 'sw-resize' | 'nwse-resize' | 'nw-resize' | 'se-resize'

* XCSS
cursor : default;

* Script ( normal property )
this.ListView00.cursor = "default";

참고

- cursor 속성값을 설정하지 않으면 undefined 가 설정되고 "auto" 로 동작합니다.

- disable 상태인 서브컨트롤이 있는 컴포넌트의 경우 마우스 포인터는 서브컨트롤 영역에서
   서브컨트롤의 disable status값이 적용되지 않고, 컴포넌트의 enable status 설정값이 적용됩니다.
   서브컨트롤과 컴포넌트가 모두 disable 상태일 때는 parent 의 enable status 설정값이 적용됩니다.

enable

ListView 의 사용가능 여부를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.enable[= benable]

문법 설정

benable ::= 'true' | 'false'

this.ListView00.enable = true; 
this.ListView00.enable = false;

참고

- enable 속성값을 설정하지 않으면 true 로 적용됩니다.

- enable 속성값이 false 이면 컴포넌트가 화면에 표시되지만 포커스나 입력을 받을 수 없습니다.

- Div 와 같은 컨테이너 컴포넌트의 enable 속성값을 false 로 설정하면 자식 컴포넌트도 모두 Disable 됩니다.

enableevent

ListView 에서 이벤트를 발생시킬지 여부를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.enableevent[= bEvent]

문법 설정

bEvent ::= 'true' | 'false'

this.ListView00.enableevent = true;  

this.ListView00.enableevent = false;

참고

- enableevent 속성을 false 로 설정하면 이벤트 발생으로 인한 처리속도 지연과 화면 깜빡임을 방지할 수 있습니다.

enableredraw

ListView 에 변경이 발생하면 화면을 자동으로 다시 그릴 지 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.enableredraw[= bRedraw]

문법 설정

bRedraw ::= 'true' | 'false'

this.ListView00.enableredraw = true;
this.ListView00.enableredraw = false;

참고

- enableredraw 속성을 false 로 설정하면 컴포넌트가 변경되어도 화면에 반영되지 않습니다.

- enableredraw 속성값이 false 에서 true 로 변경되면 화면 다시 그리기가 즉시 수행됩니다.

- Div 와 같이 자식 컴포넌트를 갖는 컴포넌트는 화면 다시 그리기가 자식 컴포넌트에는 적용되지 않고 자기 자신에만 영향을 줍니다.

flexgrow

Layout 컨테이너 내 Main Axis(type 속성값이 "horizontal"이면 수평축, type 속성값이 "vertical"이면 수직축) 여백을 설정한 비율만큼 나누어 컴포넌트의 크기를 재조정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.flexgrow[= fVal]

문법 설정

참고

- flexgrow 속성값을 설정하지 않으면 undefined로 설정되고 0 값으로 동작합니다.
  속성값이 0이면 크기를 재조정하지 않습니다.
    
- Layout 컨테이너 내 배치된 컴포넌트 중 flexgrow 속성값이 0보다 큰 값으로 설정된 컴포넌트를 대상으로 Main Axis의 여백을 설정한 비율만큼 나누어 크기에 적용합니다.

- maxwidth, maxheight 속성값을 설정한 경우에는 해당 크기보다 크게 크기가 조정되지는 않습니다.


◆ fittocontents 속성과 같이 사용하는 경우

아래와 같은 경우 컴포넌트의 flexgrow 속성값이 무시되고 fittocontents 속성만 적용됩니다.

- Layout 오브젝트 또는 Panel 컴포넌트의 type 속성값이 "horizontal"이고
  컴포넌트의 fittocontents 속성값이 "width" 또는 "both"일 때
- Layout 오브젝트 또는 Panel 컴포넌트의 type 속성값이 "vertical"이고
  컴포넌트의 fittocontents 속성값이 "height" 또는 "both"일 때

flexshrink

Layout 컨테이너 내 Main Axis(type 속성값이 "horizontal"이면 수평축, type 속성값이 "vertical"이면 수직축)에 컴포넌트가 배치되는 영역이 컨테이너 영역을 초과하지 않도록 설정한 비율만큼 나누어 컴포넌트의 크기를 재조정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.flexshrink[= fVal]

문법 설정

참고

- flexshrink 속성값을 설정하지 않으면 undefined로 설정되고 1 값으로 동작합니다.
  속성값이 0이면 크기를 재조정하지 않습니다.
    
- Layout 컨테이너 내 배치된 컴포넌트 중 flexshrink 속성값이 0보다 큰 값으로 설정된 컴포넌트를 대상으로 Main Axis의 초과 영역을 설정한 비율만큼 나누어 크기에 적용합니다.

- minwidth, minheight 속성값을 설정한 경우에는 해당 크기보다 작게 크기가 조정되지는 않습니다.


◆ fittocontents 속성과 같이 사용하는 경우

아래와 같은 경우 컴포넌트의 flexshrink 속성값이 무시되고 fittocontents 속성만 적용됩니다.

- Layout 오브젝트 또는 Panel 컴포넌트의 type 속성값이 "horizontal"이고
  컴포넌트의 fittocontents 속성값이 "width" 또는 "both"일 때
- Layout 오브젝트 또는 Panel 컴포넌트의 type 속성값이 "vertical"이고
  컴포넌트의 fittocontents 속성값이 "height" 또는 "both"일 때

font

ListView 에서 사용하는 폰트를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.font[= strfont]

문법 설정

strfont ::= [<font-style>] [<font-weight>] <font-size> ['/'<line-height>] <font-family>

<font-style> ::= 'normal' | 'italic'
<font-weight> ::= 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
<font-size> ::= <nSize> 'px'|'pt'|'em'|'rem'
<line-height> ::= 'normal' | <nValue> | <nPixel>'px' | <nPercent>'%'
<font-family> ::= <font-name> [',' <font-name>]*

* XCSS
font : bold 12pt/30px arial, sans-serif;

* Script ( normal property )
this.ListView00.font = "bold 12pt/30px arial, sans-serif";

참고

- font 속성값을 설정하지 않으면 undefined 가 설정되고, "12pt/normal Verdana" 로 동작합니다.

- font 속성의 폰트 크기가 변경되면 <line-height> 에 적용된 값에 따라 줄간격이 변경될 수 있습니다.

- <font-weight> 를 수치로 설정 시 "400" 값이 일반적인 굵기로 적용되고, "700" 값이 "bold" 로 적용됩니다.
   폰트에 수치값에 해당하는 폰트굵기가 없다면 "400" 과 "700" 중 가까운 값으로 표시됩니다.

- UserFont 사용 시 환경별로 지원하는 포맷정보는 "Appendix > Supported UserFont" 항목을 참고하세요.


◆ WRE 제약

- -nexa-text-align 속성값이 "right" 일 때 font 속성에 "italic" 을 설정하면 마지막 텍스트의 기울어진 부분이 잘려서 표시될 수 있습니다.
   웹브라우저에서 텍스트영역을 일반글자 기준으로 처리한 후 기울임을 적용하면서 발생하는 문제입니다.

formatid

formats 속성에 정의된 포맷 중 ListView 에 표시할 포맷의 ID 를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.formatid[= strFormatID]

문법 설정

this.ListView00.formatid = "default";

참고

- 하나의 ListView 에서 데이터를 여러 형식으로 표현하고자 할 때 사용합니다.
   넥사크로 스튜디오의 ListView Contents Editor 를 사용하여 여러개의 포맷을 추가할 수 있습니다.

- formatid 속성을 설정하지 않으면 포맷 ID가 "default" 인 포맷이 표시됩니다.
   포맷 ID가 "default" 인 포맷이 없다면 첫번째로 정의된 포맷이 표시됩니다.

- formatid 속성값을 변경하면 디자인 시 정의된 포맷이 적용되어 표시됩니다.
   실행중 스크립트로 변경한 포맷 정보는 유지되지 않습니다.

활용 예제

• 너비에 따라 다른 형식으로 데이터 표현하기

formats

ListView 에 정의된 모든 포맷의 정보를 갖는 속성입니다.

지원 환경

속성 타입

문법

ListView.formats[= strFormat]

문법 설정

var strFormat = ' <Formats>'
                   + '   <Format id="default">'
                   + '     <Band id="body" left="0px" top="0px" width="100%" height="24px" expandbartype="true">'
                   + '       <Cell id="cell00" left="0px" top="0px" bottom="0px" width="33%" text="bind:Column0"/>'
                   + '       <Cell id="cell01" left="33%" top="0px" bottom="0px" width="33%" text="bind:Column1"/>'
                   + '     </Band>'
                   + '     <Band id="detail" left="0px" top="0px" width="100%" height="60px">'
                   + '       <Cell id="cell01" left="33%" top="0px" bottom="0px" width="33%" text="bind:Column1"/>'
                   + '       <Cell id="cell02" left="66%" right="0px" top="0px" bottom="0px" text="bind:Column2"/>'
                   + '     </Band>'
                   + '   </Format>'
                   + ' </Formats>'

this.ListView00.formats = strFormat;

참고

- formats 속성을 동적으로 변경하려면 전체 포맷을 형식에 맞게 설정하여야 합니다.
  일부 포맷만 선택적으로 변경할 수 없습니다.

height

ListView 을(를) 표시하기 위한 높이를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.height[= nHeight]

문법 설정

nHeight ::= [<strCompID> ':'] <nVal> ['px' | '%' | 'em' | 'rem']

this.ListView00.height = 10; 
this.ListView00.height = "10px"; 
this.ListView00.height = 10%"; 
this.ListView00.height = Button00:10%";

참고

- 높이값에 단위를 생략할 경우 pixel 값으로 적용됩니다.

- 높이값에 기준 컴포넌트 또는 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

◆ 기준 컴포넌트 설정 시 유의할 점

- 속성값을 기준 컴포넌트(<strCompID>)를 참조하도록 설정한 경우 다음 사항을 유의해주세요.

스크립트로 속성값에 설정한 기준 컴포넌트 값(<strCompID>)을 변경하는 경우 유효한 컴포넌트 값이 아니면(잘못된 컴포넌트 id, 부모 또는 stepindex가 다른 컴포넌트) 기준 컴포넌트 값은 무시하고 부모를 기준으로 좌표값(<nVal>)을 적용합니다.
스크립트로 기준 컴포넌트의 크기나 위치 속성값을 변경되는 경우(속성값에 영향을 주는 메소드 실행으로 인한 변경 포함) 변경된 속성값이 기준 컴포넌트를 참조하는 컴포넌트에 바로 반영되지 않습니다.
예를 들어 Button01 컴포넌트의 left 속성값이 "Button00:10px"인 경우 스크립트로 Button00 컴포넌트의 right 속성값이 변경하더라도 Button01 컴포넌트의 위치는 변경되지 않습니다.
기준 컴포넌트의 크기나 위치 속성값이 변경된 것을 기준 컴포넌트를 참조하는 컴포넌트에 반영하려면 스크립트에서 기준 컴포넌트의 크기나 위치 속성값 변경 후 Form 오브젝트의 resetScroll 메소드를 실행해주어야 합니다.

id

ListView의 고유 식별자를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.id

문법 설정

참고

-  addChild나 insertChild 메소드를 사용하여 컴포넌트를 등록할때 parent 가 자식컴포넌트를 구별하기 위한 고유한 key값입니다.

- 속성명이나 메소드명과 같은 예약어를 id 속성값으로 설정할 경우 오류가 발생할 수 있습니다.

- 컴포넌트의 속성은 아니지만 편의를 위하여 넥사크로 스튜디오에서 설정할 수 있는 기능이 제공됩니다.

- name 속성은 사용자가 지정한 컴포넌트의 이름으로 논리적으로 중복이 가능합니다.

- 넥사크로 스튜디오에서 컴포넌트를 생성하거나 id 값을 설정하면 name 속성에 동일한 값이 설정됩니다.

initvalueid

ListView 에 적용될 InitValue 의 ID 를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.initvalueid[= strValueID]

문법 설정

참고

- ListView 가 화면에 표시된 후에는 속성값을 설정하거나 변경 할 수 없습니다.
   ListView 를 동적으로 생성 시 show() 메소드 실행 전에 속성값을 설정하여야 합니다.

- Screen 별로 Environment 의 initvaluefileid 속성을 각각 설정하면 Screen 에 따라 다른 초기값을 설정할 수 있습니다.

- InitValueDefinition 영역에 한 개 이상의 InitValue 파일을 정의할 수 있고,
   InitValue 파일에는 컴포넌트별로 여러개의 초기값 정의를 할 수 있습니다.

layoutorder

Layout 컨테이너 내 Main Axis(type 속성값이 "horizontal"이면 수평축, type 속성값이 "vertical"이면 수직축)에 컴포넌트가 배치되는 순서를 설정합니다.

지원 환경

속성 타입

문법

ListView.layoutorder[= nVal]

문법 설정

참고

- layoutorder 속성값을 설정하지 않으면 0으로 설정됩니다.

- 속성값이 음수인 경우에는 0으로 설정됩니다.

- 같은 값으로 2개 이상의 컴포넌트의 속성값을 설정할 수 있습니다. 
  속성값이 같은 경우에는 생성 순서(Z-Order)에 따라 배치 순서가 달라집니다.

left

ListView 을(를) 표시하기 위한 좌측 좌표값을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.left[= nLeft]

문법 설정

nLeft ::= [<strCompID> ':'] <nVal> ['px' | '%' | 'em' | 'rem']

this.ListView00.left = 10; 
this.ListView00.left = "10px"; 
this.ListView00.left = "10%"; 
this.ListView00.left = "Button00:10px"; 
this.ListView00.left = "Button00:10%";

참고

- 좌표값에 단위를 생략할 경우 pixel 값으로 적용됩니다.

- 좌표값에 기준 컴포넌트 또는 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

◆ 기준 컴포넌트 설정 시 유의할 점

- 속성값을 기준 컴포넌트(<strCompID>)를 참조하도록 설정한 경우 다음 사항을 유의해주세요.

스크립트로 속성값에 설정한 기준 컴포넌트 값(<strCompID>)을 변경하는 경우 유효한 컴포넌트 값이 아니면(잘못된 컴포넌트 id, 부모 또는 stepindex가 다른 컴포넌트) 기준 컴포넌트 값은 무시하고 부모를 기준으로 좌표값(<nVal>)을 적용합니다.
스크립트로 기준 컴포넌트의 크기나 위치 속성값을 변경되는 경우(속성값에 영향을 주는 메소드 실행으로 인한 변경 포함) 변경된 속성값이 기준 컴포넌트를 참조하는 컴포넌트에 바로 반영되지 않습니다.
예를 들어 Button01 컴포넌트의 left 속성값이 "Button00:10px"인 경우 스크립트로 Button00 컴포넌트의 right 속성값이 변경하더라도 Button01 컴포넌트의 위치는 변경되지 않습니다.
기준 컴포넌트의 크기나 위치 속성값이 변경된 것을 기준 컴포넌트를 참조하는 컴포넌트에 반영하려면 스크립트에서 기준 컴포넌트의 크기나 위치 속성값 변경 후 Form 오브젝트의 resetScroll 메소드를 실행해주어야 합니다.

letter-spacing

ListView 에 표시되는 문자의 간격(자간)을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.letterSpacing[= strspace]

문법 설정

strspace ::= 'normal' | <nVal> ['px']

* XCSS
letter-spacing : 2px ;

* Script ( normal property )
this.ListView00.letterSpacing = "2px";

참고

- letter-spacing 속성값을 설정하지 않으면 undefined 가 설정되고, "normal" 로 동작합니다.

- 스크립트로 접근 시 속성명은 "letterSpacing"을 사용해야 합니다.

locale

ListView 에 적용될 국가 및 언어(locale)를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.locale[= strlocale]

문법 설정

this.ListView00.locale = "ko_KR";

참고

- ISO 639-1에서 정의하고 있는 2-알파벳 언어 코드와 ISO 3166-1에서 정의하고 있는 2-알파벳 국가 코드를 조합하여 사용합니다.

- 국가 및 언어 코드는 "Appendix > Locale Code List" 항목을 참고하세요.

maxheight

ListView 이(가) 화면에 표시되는 최대 높이를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.maxheight[= nMaxHeight]

문법 설정

nMaxHeight ::= <nVal> ['px']

this.ListView00.maxheight = 20; 
this.ListView00.maxheight = "20px";

참고

- height 속성값이 maxheight 보다 크면 화면에 표시되는 ListView 의 높이는 maxheight 속성값으로 적용됩니다.
  표시되는 높이만 적용되고 height 속성값은 변경되지 않습니다.

- maxheight 속성값에 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

- maxheight 속성값을 minheight 속성값보다 작게 설정하면 minheight 속성값이 maxheight 속성값으로 설정됩니다.

- Position 관련 속성(left, top 등)에 기준컴포넌트를 설정하여 ListView 의 높이가 상대적으로 설정될 경우에도 적용되는 속성입니다.
   maxheight > height > top(상대값) > bottom(상대값) > top(절대값) > bottom(절대값) 순서로 설정값이 적용됩니다.
   이 때, height, top, bottom 값 중 먼저 2개가 설정되면 나머지는 무시됩니다.

- fittocontents 속성이 있는 컴포넌트는 속성값에 의해 높이가 자동 설정될 때도 적용되는 속성입니다.

maxwidth

ListView 이(가) 화면에 표시되는 최대 너비를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.maxwidth[= nMaxWidth]

문법 설정

nMaxWidth ::= <nVal> ['px']

this.ListView00.maxwidth = 20; 
this.ListView00.maxwidth = "20px";

참고

- width 속성값이 maxwidth 보다 크면 화면에 표시되는 ListView 의 너비는 maxwidth 속성값으로 적용됩니다.
  표시되는 너비만 적용되고 width 속성값은 변경되지 않습니다.

- maxwidth 속성값에 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

- maxwidth 속성값을 minwidth 속성값보다 작게 설정하면 minwidth 속성값이 maxwidth 속성값으로 설정됩니다.

- Position 관련 속성(left, top 등)에 기준컴포넌트를 설정하여 ListView 의 너비가 상대적으로 설정될 경우에도 적용되는 속성입니다.
   maxwidth > width > left(상대값) > right(상대값) > left(절대값) > right(절대값) 순서로 설정값이 적용됩니다.
   이 때, width, left, right 값 중 먼저 2개가 설정되면 나머지는 무시됩니다.

- fittocontents 속성이 있는 컴포넌트는 속성값에 의해 너비가 자동 설정될 때도 적용되는 속성입니다.

minheight

ListView 이(가) 화면에 표시되는 최소 높이를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.minheight[= nMinHeight]

문법 설정

nMinHeight ::= <nVal> ['px']

this.ListView00.minheight = 20; 
this.ListView00.minheight = "20px";

참고

- height 속성값이 minheight 보다 작다면 화면에 표시되는 ListView 의 높이는 minheight 속성값으로 적용됩니다.
  표시되는 높이만 적용되고 height 속성값은 변경되지 않습니다.

- minheight 속성값에 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

- minheight 속성값을 maxheight 속성값보다 크게 설정하면 maxheight 속성값이 minheight 속성값으로 설정됩니다.

- Position 관련 속성(left, top 등)에 기준컴포넌트를 설정하여 ListView 의 높이가 상대적으로 설정될 경우에도 적용되는 속성입니다.
   minheight > height > top(상대값) > bottom(상대값) > top(절대값) > bottom(절대값) 순서로 설정값이 적용됩니다.
   이 때, height, top, bottom 값 중 먼저 2개가 설정되면 나머지는 무시됩니다.

- fittocontents 속성이 있는 컴포넌트는 속성값에 의해 높이가 자동 설정될 때도 적용되는 속성입니다.

minwidth

ListView 이(가) 화면에 표시되는 최소 너비를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.minwidth[= nMinWidth]

문법 설정

nMinWidth ::= <nVal> ['px']

this.ListView00.minwidth = 20; 
this.ListView00.minwidth = "20px";

참고

- width 속성값이 minwidth 보다 작으면 화면에 표시되는 ListView 의 너비는 minwidth 속성값으로 적용됩니다.
  표시되는 너비만 적용되고 width 속성값은 변경되지 않습니다.

- minwidth 속성값에 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

- minwidth 속성값을 maxwidth 속성값보다 크게 설정하면 maxwidth 속성값이 minwidth 속성값으로 설정됩니다.

- Position 관련 속성(left, top 등)에 기준컴포넌트를 설정하여 ListView 의 너비가 상대적으로 설정될 경우에도 적용되는 속성입니다.
   minwidth > width > left(상대값) > right(상대값) > left(절대값) > right(절대값) 순서로 설정값이 적용됩니다.
   이 때, width, left, right 값 중 먼저 2개가 설정되면 나머지는 무시됩니다.

- fittocontents 속성이 있는 컴포넌트는 속성값에 의해 너비가 자동 설정될 때도 적용되는 속성입니다.

name

ListView 의 이름을 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.name[= strName]

문법 설정

참고

- name 속성은 사용자가 지정한 컴포넌트의 이름으로 논리적으로 중복이 가능합니다.

- 넥사크로 스튜디오에서 컴포넌트를 생성하거나 id 값을 설정하면 name 속성에 동일한 값이 설정됩니다.

-nexa-border

ListView 의 테두리를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.border[= strborder]

문법 설정

strborder ::= <line-width> <line-style> <color> [,<line-width> <line-style> <color>]{3}

<line-width> ::= 'thin' | 'medium' | 'thick' | <nWidth> 'px'
<line-style> ::= 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'
<color> ::= <NamedColor> | <NumericColor>

1회 입력 : top/right/bottom/left 에 모두 적용됩니다.
2회 입력 : top/bottom, right/left 에 첫번째 값부터 각각 적용됩니다.
3회 입력 : top, right/left, bottom 에 첫번째 값부터 각각 적용됩니다.
4회 입력 : top, right, bottom, left 에 첫번째 값부터 각각 적용됩니다.

* 2회~4회 입력은 border-radius 속성값이 설정되지 않은 경우만 적용됩니다.

* XCSS
-nexa-border : 1px solid #999999;
-nexa-border : 1px solid #999999, 1px solid #999999, 1px solid #999999, 1px solid #999999;

* Script ( normal property )
this.ListView00.border = "1px solid #999999";
this.ListView00.border = "1px solid #999999, 1px solid #999999, 1px solid #999999, 1px solid #999999";

참고

- -nexa-border 속성값을 설정하지 않으면 undefined 가 설정되고, "medium none #999999" 로 동작합니다.

- <line-style> 이 "double" 일 때 두 줄을 다른 색으로 설정할 수 없습니다.
   <color> 에 설정된 색이 두 줄에 모두 적용됩니다.

- 스크립트로 접근 시 속성명은 "border"를 사용해야 합니다.


◆ Nexacro Runtime Environment 제약

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 top > right > bottom > left 순으로 겹쳐서 표시됩니다.

- <line-style> 에 "double","groove","ridge","inset","outset" 값을 설정해도 적용되지 않습니다.

- <line-width> 에 "thin","medium","thick" 값을 설정해도 적용되지 않습니다.


◆ Web Runtime Environment 제약

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 웹브라우저에 따라 테두리가 겹쳐지는 순서가 다르게 처리될 수 있습니다.

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 border-radius 속성값이 설정되어 있으면 
   두께는 각 테두리 별로 따로 적용되고, 색상은 top 에 설정된 색이 적용됩니다.

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 border-radius 속성값이 설정되어 있어도
   일부 브라우저는 각 테두리의 색상이나 두께가 각각 적용됩니다.

- XCSS 를 사용하지 않고 rgba(), hsl(), hsla() 메소드를 속성에 직접 설정할 경우 브라우저 버전에 따라 적용되지 않을 수 있습니다.

-nexa-edge

ListView 의 테두리(Border) 안쪽에 표시될 Edge 이미지를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.edge[= stredge]

문법 설정

stredge ::= 'none' | <image> [<fixedwidth>'px' <fixedheight>'px']

<image> ::= 'URL("' <Theme-Image> | <Web-Image> '")'

* XCSS
-nexa-edge : "URL('./images/border.png')" 5px 5px;

* Script ( normal property )
this.ListView00.edge = "URL('./images/border.png')" 5px 5px;

참고

- -nexa-edge 속성값을 설정하지 않으면 undefined 가 설정되고, "none" 으로 동작합니다.

- 스크립트로 접근 시 속성명은 "edge" 를 사용해야 합니다.

- ListView 내부에 테두리 형태로 이미지를 표시하고자 할 때 사용하는 속성입니다.

- -nexa-edge 속성값을 설정하면 이미지의 상/하/좌/우 일정 영역(<fixedwidth>,<fixedheight> 값)을 고정하고 안쪽 사각형 영역을 Stretch 하여 처리합니다.

- background 속성에 의해 배경색 또는 이미지가 설정되어 있어도 -nexa-edge 속성에 설정된 이미지가 제일 위에 표시됩니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.
   사용자 Prefix 는 스크립트 또는 넥사크로 스튜디오에서 속성값으로 설정 시 사용할 수 있습니다.


◆ WRE 제약

- <fixedwidth>,<fixedheight> 값이 이미지 사이즈의 1/2 을 초과할 경우 브라우저별로 보이는 형태가 다를 수 있습니다.

- CSS3 스펙을 지원하지 않는 브라우저 버전에서는 정상적으로 표시되지 않을 수 있습니다.

-nexa-rtl-background-image

ListView 의 rtl 속성이 true 로 적용될 때 배경에 표시될 이미지를 설정하는 속성입니다.

지원 환경

속성 타입

문법

ListView.-nexa-rtl-background-image

문법 설정

strRtlBgImage ::= "URL(' " <Theme-Image> | <Web-Image> " ')"

* XCSS
-nexa-rtl-background-image : URL("http://localhost/Test.jpg");
-nexa-rtl-background-image : URL("theme://images/Test.jpg");

참고

- rtl 속성에 의해 표시기준이 변경되면 반전된 이미지를 적용하려 할 때 사용하는 속성입니다.

- XCSS 에서만 설정할 수 있는 속성으로 스크립트로 값을 변경할 수 없습니다.
   XCSS 에 -nexa-rtl-background-image 속성값을 설정하지 않으면 background 속성에 설정된 이미지가 적용됩니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.

- 배경이미지가 적용되는 영역은 컴포넌트의 클라이언트 영역입니다.

- background 속성에 배경색이 설정되어 있을 경우 배경색 위에 이미지가 표시됩니다.

- 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
   background 속성에 그라데이션이 설정되어 있을 경우 오동작이 발생할 수 있습니다.

-nexa-rtl-edge-image

ListView 의 rtl 속성이 true 로 적용될 때 테두리(Border) 안쪽에 표시될 Edge 이미지를 설정하는 속성입니다.

지원 환경