개요

Grid는 Dataset의 내용을 격자 모양으로 표현하는 컴포넌트입니다.

지원 환경

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

- Grid 는 Head, Body, Summary 영역의 Band 로 구성되며, 각 Band 는 Cell 이라는 기본 단위로 구성됩니다.
   Cell 별로 Dataset 의 Column 과 맵핑해서 사용할수 있으며, Combo, CheckBox, Image, ProgressBar, Edit 컴포넌트를 포함 할 수 있어 다양한 디자인 및 편집이 가능합니다.

- Head, Body, Summary Band 는 한줄 이상의 Line 으로 표현할 수 있습니다.
   Body Band 는 바인딩된 Dataset 의 레코드를 보여줍니다.
   ContentsEditor 를 통해서 디자인한 Body Band 의 레코드는 Dataset 의 한 레코드와 맵핑됩니다.
   Dataset 의 한 레코드를 보기 쉽게 표현하기 위해 Grid 의 Body 영역을 MultiLine 으로 구성할 수 있습니다.

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

컴포넌트 구조

Basic Key Action

Accessibility Key Action

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

생성자

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

var objComp = new Grid();

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

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

Status

Control

속성

accessibilityaction

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

지원 환경

속성 타입

문법

Grid.accessibilityaction[= strAction]

문법 설정

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

참고

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

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

accessibilitydesclevel

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

지원 환경

속성 타입

문법

Grid.accessibilitydesclevel[= enumLevel]

문법 설정

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

this.Grid00.accessibilitydesclevel = "all";

참고

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

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

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

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

accessibilitydescription

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

지원 환경

속성 타입

문법

Grid.accessibilitydescription[= strDescription]

문법 설정

this.Grid00.accessibilitydescription = "Option";

참고

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

accessibilityenable

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

지원 환경

속성 타입

문법

Grid.accessibilityenable[= bEnable]

문법 설정

bEnable ::= 'true' | 'false'

this.Grid00.accessibilityenable = false;

참고

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

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

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

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


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

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

accessibilitylabel

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

지원 환경

속성 타입

문법

Grid.accessibilitylabel[= strLabel]

문법 설정

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

참고

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

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

accessibilityrole

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

지원 환경

속성 타입

문법

Grid.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.Grid00.accessibilityrole = "none"; 
this.Grid00.accessibilityrole = "button";

참고

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

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

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

autoenter

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

지원 환경

속성 타입

문법

Grid.autoenter[= enumType]

문법 설정

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

this.Grid00.autoenter = "key";

참고

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

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

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

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


◆ Head 밴드 영역 내 동작

- 속성값을 "select"로 설정한 경우 Head 밴드 영역 내에서 편집 가능한 Cell 영역에서 마우스 왼쪽 버튼 클릭 시 HeadValue를 편집할 수 있는 컨트롤을 표시합니다.


◆ WRE 제약

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

활용 예제

• 다양한 형식으로 데이터 편집하기

• 트리에서 편집하기

autofittype

Grid 에 스크롤 없이 전체 Column이 표시되도록 Column의 너비를 자동조절할지 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.autofittype[= enumType]

문법 설정

enumType ::= 'none' | 'col'

this.Grid00.autofittype = "col";

참고

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

- Grid 에 Left/Right Band 로 설정된 Column은 자동조절되지 않고, 설정된 너비를 유지합니다.

- autofittype 속성은 수시로 변동되는 데이터에 대해서 자동으로 Grid 영역에 맞게 크기를 조절할 필요가 있을 경우에 사용합니다.

◆ autofittype 속성과 autosizingtype 속성을 같이 설정 시 동작

- autofittype 속성값을 "col"로 설정하고 autosizingtype 속성값을 "col" 또는 "both"로 설정한 경우 Column 크기에 대한 autosizingtype 속성값은 무시됩니다.
  autofittype 속성값을 "col"로 설정한 상태에서
  autosizingtype 속성값을 "col"로 설정한 경우 "none"으로 처리되며
  autosizingtype 속성값을 "both"로 설정한 경우 "row"로 처리됩니다.

활용 예제

• expr 내에서 사용할 수 있는 속성

autosizebandtype

autosizingtype 속성에 의해 자동으로 크기가 조절 될 영역을 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.autosizebandtype[= enumType]

문법 설정

enumType ::= 'body' | 'head' | 'summary' | 'allband' | 'nohead' | 'noleft' | 'nohead,noleft'

this.Grid00.autosizebandtype = "nohead";

참고

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

- Row, Column 의 크기는 autosizebandtype 속성값에 의해 자동조절되는 범위의 데이터 크기로 결정됩니다.
  자동조절되지 않는 범위의 데이터는 Row, Column 의 크기를 결정하는데 영향을 미치지 않습니다.
  또한, 합병(Merge)된 Cell은 Row, Column 크기를 결정할 때 제외됩니다.

- autosizingtype 속성값이 "none"이 아닐 경우에 적용되는 속성입니다.

- autosizingtype 속성값이 "row" 일 때는 Row의 높이만 자동조절되고, "col" 일 때는 Column의 너비만 자동조절됩니다.
  autosizingtype 속성값이 "both" 일 때는 Row, Column 의 크기가 모두 자동조절됩니다.

- extendsizetype 속성값에 따라 각 Row 의 높이가 다르게 설정될 수 있습니다.

autosizingtype

Grid 컴포넌트에 데이터가 모두 표시되도록 Row, Column의 크기를 자동조절 할 지 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.autosizingtype[= enumType]

문법 설정

enumType ::= 'none' | 'col' | 'row' | 'both'

this.Grid00.autosizingtype = "both";

참고

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

- autosizingtype 속성에 의해 화면에 표시된 Row, Column 크기가 변경되어도 formats 속성의 실제값은 변경되지 않습니다.

- Dataset 오브젝트가 새로 로딩되거나 Cell 데이터가 변경되면 Row, Column 크기가 매번 자동조절됩니다.
  또한 Dataset 오브젝트의 keystring 속성값이 변경되어 Grid 컴포넌트에 표시할 데이터가 변경될 때도 Row, Column 크기가 자동조절됩니다.

◆ autofittype 속성과 autosizingtype 속성을 같이 설정 시 동작

- autofittype 속성값을 "col"로 설정하고 autosizingtype 속성값을 "col" 또는 "both"로 설정한 경우 Column 크기에 대한 autosizingtype 속성값은 무시됩니다.
  autofittype 속성값을 "col"로 설정한 상태에서
  autosizingtype 속성값을 "col"로 설정한 경우 "none"으로 처리되며
  autosizingtype 속성값을 "both"로 설정한 경우 "row"로 처리됩니다.

◆ 자동조절되는 Row, Column 범위

- 자동조절되는 Row, Column 범위를 autosizebandtype 속성으로 변경할 수 있습니다.
  이때, 합병(Merge)된 Cell은 Row, Column 크기를 계산할 때 제외됩니다.
  autosizebandtype 속성값을 설정하지 않으면 band 속성값이 "body"인 Row, Column이 자동조절됩니다.

◆ 각 Row를 다른 높이로 조절

- autosizingtype 속성값을 "both" 또는 "row"로 설정하고 extendsizetype 속성값을 "row"로 설정하면 각 Row를 다른 높이로 조절할 수 있습니다.
  extendsizetype 속성값을 설정하지 않으면 모든 Row는 같은 높이로 자동조절됩니다.

- 각 Row를 다른 높이로 조절하도록 설정한 경우에는 아래와 같이 동작합니다.
   - 화면에 보이는 영역의 Row 크기만 계산하고 출력합니다.
   - 스크롤 동작 시 화면에 보이는 영역의 Row 크기를 계산하며 Row 크기 계산이 끝난 영역은 더 이상 계산 처리를 하지 않습니다.

- 스크롤 동작 방식에 따른 계산 시점은 아래와 같습니다.
   - 트랙 버튼을 사용해 스크롤바를 움직이거나 플링에 의해 스크롤이 진행하는 경우 스크롤 동작이 완료됐을 때
   - 트랙 버튼을 사용해 스크롤바를 움직이는 중에 일정 시간 멈춘 상태로 있을 때
     (멈춘 상태를 처리하는 기준은 실행 환경에 따라 달라질 수 있습니다. 0.5~1초 사이로 멈춘 상태인 경우 처리합니다).
   - 트랙 버튼 또는 플링 외 다른 방법(마우스 휠 버튼, 키보드 방향키 등)을 사용해 스크롤 동작을 처리하는 경우 스크롤이 진행 중일 때
    
- getCellRect, getSubCellRect 메소드 실행 시 파라미터로 설정한 Row 영역 계산 여부에 따라 다른 값을 반환할 수 있습니다. 계산되지 않은 영역은 계산되지 않은 Cell 영역 정보를 반환합니다.
    
- getRealRowSize, getRealRowFullSize 메소드 실행 시에는 스크롤 동작과 별개로 계산해 높이값을 반환합니다.

◆ 특정 Row, Column만 자동조절

- 특정 Row 또는 Column 만 크기를 자동조절하려면 autoSizeCol(), autoSizeRow() 메소드를 사용하여야 합니다.

◆ mergeCell 메소드 사용 시 주의사항

- mergeCell() 메소드로 병합된 Cell의 복잡도가 높을 때 autosizingtype 속성값을 적용할 경우 설정하는 순서에 따라 결과가 동일하지 않을 수 있습니다.
  즉, autosizingtype 속성값 설정 후 mergeCell() 메소드를 실행한 것과 mergeCell() 메소드 실행 후 autosizingtype 속성을 설정한 결과가 다를 수 있습니다.
  병합된 Cell 의 복잡도가 높을 경우 성능 향상을 위한 조치이며, 이런 경우 mergeCell() 메소드 실행 후 autosizingtype 속성을 설정하는 것을 권장합니다.

활용 예제

• 스크롤바가 생기지 않게 Grid 컴포넌트의 높이 조정하기

• 자동 줄 바꾸기와 자동 Cell 크기 조절하기

• expr 내에서 사용할 수 있는 속성

autoupdatetype

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

지원 환경

속성 타입

문법

Grid.autoupdatetype[= enumType]

문법 설정

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

this.Grid00.autoupdatetype = "itemselect";

참고

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

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

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

background

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

지원 환경

속성 타입

문법

Grid.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.Grid00.background = "#ffffaa";
this.Grid00.background = ""URL('./images/smiley.gif')" no-repeat center center #ffffaa";
this.Grid00.background = ""URL('./images/smiley.gif')" no-repeat center center /auto #ffffaa";
this.Grid00.background = ""URL('./images/smiley.gif')" no-repeat center center /15px 15% #ffffaa";
this.Grid00.background = "linear-gradient( red , blue , yellow )";
this.Grid00.background = "linear-gradient( #FF0000 , rgb(0,0,255) , rgb(255,255,0))";
this.Grid00.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" 로 설정하여야 합니다.

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

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

binddataset

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

지원 환경

속성 타입

문법

Grid.binddataset[= strDatasetID]

문법 설정

this.Grid00.binddataset = "Dataset00";

참고

- Grid 에서 선택된 Row 를 변경하면 DataSet 의 rowposition 속성값이 변경됩니다.
  반대로 DataSet 의 rowposition 속성값을 변경하면 Grid 에 선택된 Row 가 변경됩니다.

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

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

활용 예제

• Grid에 Dataset 바인딩하기

• 바인딩된 Dataset 오브젝트의 포맷을 생성하여 보여주기

body

Grid 의 구성 요소 중 Body 밴드 오브젝트를 갖는 읽기전용 속성입니다.

지원 환경

속성 타입

문법

Grid.body

문법 설정

this.Grid00.body.background  = "red";

참고

- formats 속성에 여러개의 포맷이 선언되어 있을 경우 현재 화면에 표시되는 포맷의 Body 밴드를 갖습니다.

- Body 밴드에 Cell 이 없는 경우도 밴드 오브젝트는 존재합니다.

border-radius

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

지원 환경

속성 타입

문법

Grid.borderRadius[= strborderradius]

문법 설정

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

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

* Script ( normal property )
this.Grid00.borderRadius = "10px";
this.Grid00.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

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

지원 환경

속성 타입

문법

Grid.bottom[= nBottom]

문법 설정

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

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

참고

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

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

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

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

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

cellcalendarbuttonsize

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

지원 환경

속성 타입

문법

Grid.cellcalendarbuttonsize[= strSize]

문법 설정

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

this.Grid00.cellcalendarbuttonsize = "30";
this.Grid00.cellcalendarbuttonsize = "30 20";

참고

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

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

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

cellcalendarpopupsize

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

지원 환경

속성 타입

문법

Grid.cellcalendarpopupsize[= strSize]

문법 설정

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

this.Grid00.cellcalendarpopupsize = "500 400";

참고

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

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

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

cellcalendarpopuptype

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

지원 환경

속성 타입

문법

Grid.cellcalendarpopuptype[= enumType]

문법 설정

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

this.Grid00.cellcalendarpopuptype = "system";

참고

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

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

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

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

cellcheckboxsize

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

지원 환경

속성 타입

문법

Grid.cellcheckboxsize[= nSize]

문법 설정

this.Grid00.cellcheckboxsize = 20;

참고

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

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

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

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

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

cellclickbound

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

지원 환경

속성 타입

문법

Grid.cellclickbound[= enumBound]

문법 설정

enumBound ::= 'control' | 'cell'

참고

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

- edittype 속성값과 displaytype 속성값이 아래와 같은 경우 적용되는 속성입니다.
   - edittype: "checkboxcontrol", displaytype: "checkboxcontrol"
   - edittype: "radioitem", displaytype: "radioitemcontrol"

- edittype 속성값과 displaytype 속성값이 아래와 같은 경우에는 "control"으로만 동작합니다.
   - edittype: "tree", displaytype: "treeitemcontrol"

cellcombobuttonsize

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

지원 환경

속성 타입

문법

Grid.cellcombobuttonsize[= strSize]

문법 설정

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

this.Grid00.cellcombobuttonsize = "30";
this.Grid00.cellcombobuttonsize = "30 20";

참고

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

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

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

cellcombopopupsize

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

지원 환경

속성 타입

문법

Grid.cellcombopopupsize[= strSize]

문법 설정

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

this.Grid00.cellcombopopupsize = "500 400";

참고

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

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

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

cellcombopopuptype

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

지원 환경

속성 타입

문법

Grid.cellcombopopuptype[= enumType]

문법 설정

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

this.Grid00.cellcombopopuptype = "center";

참고

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

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

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

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

cellcomboscrollbarsize

Cell 이 Combo 형식일 때 아이템 리스트에 표시되는 스크롤바의 너비를 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.cellcomboscrollbarsize[= nWidth]

문법 설정

this.Grid00.cellcomboscrollbarsize = "20";

참고

- Cell 의 comboscrollbarsize 속성값을 설정하지 않으면 Grid 의 cellcomboscrollbarsize 속성값이 적용됩니다.

- scrollbarsize 속성값을 변경하면 스크롤바 내부버튼의 높이와 너비가 같이 변경됩니다.

cellexprupdatecondition

Cell 의 Expr 값이 갱신될 때 다른 Row  와 Cell 의 Expr 값을 함께 갱신할 지 여부를 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.cellexprupdatecondition[= enumCondition]

문법 설정

enumCondition ::= 'none' | 'all' | 'celltext'

this.Grid00.cellexprupdatecondition = "celltext";

참고

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

- Grid 에서 선택되거나 선택해제된 Cell 의 Expr 값은 cellexprupdatecondition 속성값과 관계없이 항상 갱신됩니다.
   Grid 에서 선택되거나 선택해제되는 영역은 selecttype 속성값에 따라 다릅니다.

- redrawExprCell() 메소드를 실행하면 cellexprupdatecondition 속성값과 관계없이 설정된 모든 Expr 값을 즉시 갱신합니다.

활용 예제

• 특정 Row를 깜빡이게 표시하기

cellmovingtype

Grid 에서 Column 의 Head 영역을 드래그하여 Column 순서를 바꿀 수 있게 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.cellmovingtype[= enumMovingtype]

문법 설정

this.Grid00.cellmovingtype = "col";

참고

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

- Grid 의 Head 영역을 마우스로 선택한 후 옮기고 싶은 위치로 드래그하면 Column 전체가 옮겨집니다.
   한 번에 한 개의 Column 이동만 가능합니다.

- Column 에 병합(Merge)된 Cell 이나 서브(Sub) Cell 이 있는 경우에는 Column 을 이동 시킬 수 없습니다.

- Grid 의 selectscrollmode 속성값이 "select" 일 때만 적용되는 속성입니다.
   모바일 환경에서 selectscrollmode 속성값을 설정하지 않으면 "scroll" 로 적용되어 cellmovingtype 속성값이 적용되지 않습니다.

- 속성값이 "col"인 경우 ondrag 이벤트가 발생하며 ondrag 이벤트는 parent로 버블링됩니다. 
  ondragmove, ondragenter, ondragleave, ondrop 이벤트는 발생하지 않습니다.

활용 예제

• Column 위치 이동하기

cellmulticombobuttonsize

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

지원 환경

속성 타입

문법

Grid.cellmulticombobuttonsize[= strSize]

문법 설정

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

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

참고

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

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

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

cellmulticombopopupsize

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

지원 환경

속성 타입

문법

Grid.cellmulticombopopupsize[= strSize]

문법 설정

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

this.Grid00.cellmulticombopopupsize = "500 400";

참고

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

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

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

cellmulticombopopuptype

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

지원 환경

속성 타입

문법

Grid.cellmulticombopopuptype[= enumType]

문법 설정

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

this.Grid00.cellmulticombopopuptype = "center";

참고

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

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

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

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

cellmulticomboscrollbarsize

Cell 이 MultiCombo 형식일 때 아이템 리스트에 표시되는 스크롤바의 너비를 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.cellmulticomboscrollbarsize[= nWidth]

문법 설정

this.Grid00.cellmulticomboscrollbarsize = "20";

참고

- Cell의 multicomboscrollbarsize 속성값을 설정하지 않으면 Grid의 cellmulticomboscrollbarsize 속성값이 적용됩니다.

- scrollbarsize 속성값을 변경하면 스크롤바 내부버튼의 높이와 너비가 같이 변경됩니다.

cellradioitemsize

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

지원 환경

속성 타입

문법

Grid.cellradioitemsize[= nSize]

문법 설정

this.Grid00.cellradioitemsize = 20;

참고

- Cell 의 edittype 속성값이 "radioitem" 이거나 displaytype 속성값이 "radioitemcontrol" 일 때 Cell 에 표시되는 radioitem 에 적용됩니다.

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

- Cell 의 radioitemsize 속성을 설정하지 않으면 Grid 의 cellradioitemsize 속성값이 적용됩니다.

- 테마에서 radioitem 이미지 크기는 GridCellControl 하위의 cellradioitem 셀렉터에 정의됩니다.

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

cellsizebandtype

사용자가 마우스로 크기를 변경할 수 있는 Row, Column 의 영역을 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.cellsizebandtype[= enumType]

문법 설정

enumType ::= 'body' | 'allband' | 'nohead' | 'noleft' | 'nohead,noleft'

this.Grid00.cellsizebandtype = "nohead,noleft";

참고

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

- cellsizingtype 속성값이 "none"이 아닐 경우에 적용되는 속성입니다.

- cellsizingtype 속성값이 "row" 일 때는 Row 의 높이만 조절할 수 있고, "col" 일 때는 Column 의 너비만 조절할 수 있습니다.
  cellsizingtype 속성값이 "both" 일 때는 Row, Column 의 크기를 모두 조절할 수 있습니다.

- extendsizetype 속성값이 "row" 이면 각 Row 마다 높이를 다르게 설정할 수 있습니다.

cellsizingtype

사용자가 마우스로 Row 또는 Column 의 크기를 변경할 수 있게 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.cellsizingtype[= enumType]

문법 설정

enumType ::= 'none' | 'col' | 'row' | 'both'

this.Grid00.cellsizingtype = "both";

참고

- Column 의 크기 변경은 Head 영역을 드래그해야 가능합니다.

- cellsizebandtype 속성값을 설정하지 않으면 기본적으로 고정되어 있는 Head, Summ, Left, Right 밴드를 제외한 Body 밴드만 크기 변경이 가능합니다.

- extendsizetype 속성값을 설정하면 각 Row 별로 다른 높이로 조절할 수 있습니다.
  extendsizetype 속성값을 설정하지 않으면 한개 Row 의 높이 변경 시 모든 Row 가 같은 높이로 변경됩니다.

- autosizingtype 속성에 의해 Row, Column 의 크기가 자동조절된 상태에서 마우스로 크기를 재조정하면 재조정된 크기가 유지됩니다.

활용 예제

• Cell 크기 조절하기 (Row 크기 일괄 조절)

• Cell 크기 조절하기 (특정 Row 크기 조절)

celltextareascrollbarsize

Cell 이 TextArea 형식일 때 표시되는 스크롤바의 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.celltextareascrollbarsize[= nSize]

문법 설정

this.Grid00.celltextareascrollbarsize = "30";

참고

- Cell 의 textareascrollbarsize 속성값을 설정하지 않으면 Grid 의 celltextareascrollbarsize 속성값이 적용됩니다.

- celltextareascrollbarsize 속성값은 수직스크롤바의 너비와 수평스크롤바의 높이에 동일하게 적용됩니다.

- celltextareascrollbarsize 속성값을 변경하면 스크롤바 내부버튼의 높이와 너비가 같이 변경됩니다.

color

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

지원 환경

속성 타입

문법

Grid.color[= strcolor]

문법 설정

strcolor ::= <NamedColor> | <NumericColor>

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

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

참고

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


◆ web runtime environment 제약

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

createrowstype

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

지원 환경

속성 타입

문법

Grid.createrowstype [=enumType]

문법 설정

enumType ::= "auto" | "all"

this.Grid00.createrowstype = "all";

참고

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

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

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

cssclass

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

지원 환경

속성 타입

문법

Grid.cssclass[= strcssclass]

문법 설정

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

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

참고

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

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

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

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


◆ web runtime environment 제약

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

currentcell

Grid 에서 현재 선택된 Cell 의 인덱스를 갖는 읽기전용 속성입니다.

지원 환경

속성 타입

문법

Grid.currentcell

문법 설정

var nIdx = this.Grid00.currentcell;

참고

- Row 에 SubRow 가 정의되어 있다면 첫번째 SubRow 의 첫번째 Cell 부터 마지막 SubRow 의 마지막 Cell 까지 인덱스값이 증가합니다.

- Grid 에서 방향키로 선택 이동 시 currentcell 속성에 값이 설정되는 시점은 onkeydown 이벤트 발생 이후입니다.
   따라서, 정확한 Cell 인덱스값을 얻으려면 onkeyup 이벤트에서 currentcell 속성값을 확인하여야 합니다.

활용 예제

• 셀 속성 설정하기

• expr 내에서 사용할 수 있는 속성

currentcol

Grid 에서 현재 선택된 Cell 의 Column 인덱스를 갖는 읽기전용 속성입니다.

지원 환경

속성 타입

문법

Grid.currentcol

문법 설정

var nIdx = this.Grid00.currentcol;

참고

- 선택된 Cell 이 없을 경우 "-1"이 저장됩니다.

- 인덱스는 "0" 부터 시작하며 각 Row 의 동일 위치에 있는 Cell은 동일한 인덱스값을 갖습니다.

- 한 Row 가 두줄 이상으로 정의되어 있다면 첫번째 줄의 첫번째 Cell과 두번째 줄의 첫번째 Cell은 동일한 인덱스값을 갖습니다.

- 합병(Merge) 된 Cell은 합병된 첫번째 Cell 의 Column 인덱스를 갖습니다.

currentrow

Grid 에서 현재 선택된 Row 의 인덱스를 갖는 읽기전용 속성입니다.

지원 환경

속성 타입

문법

Grid.currentrow

문법 설정

var nIdx = this.Grid00.currentrow;

참고

- Grid 에서 방향키로 선택 이동 시 currentrow 속성에 값이 설정되는 시점은 onkeydown 이벤트 발생 이후입니다.
   따라서, 정확한 Row 인덱스값을 얻으려면 onkeyup 이벤트에서 currentrow 속성값을 확인하여야 합니다.

currentsubrow

Grid 에서 현재 선택된 Cell 의 Sub Row 인덱스를 갖는 읽기전용 속성입니다.

지원 환경

속성 타입

문법

Grid.currentsubrow

문법 설정

var nIdx = this.Grid00.currentsubrow;

참고

- 선택된 Cell 이 없을 경우 "-1"이 저장됩니다.

- Grid 에서 한개 Row 는 두줄 이상의 Sub Row 가 정의될 수 있습니다.
  여러줄로 정의된 Row 에서 현재 선택된 Cell 이 위치한 Sub Row 의 인덱스가 저장됩니다.

- Sub Row 의 인덱스는 "0" 부터 시작하며 각 Row 의 동일 위치에 있는 Cell은 동일한 Sub Row 인덱스값을 갖습니다.

- Sub Row 가 정의되지 않고 한줄로 이루어진 Row 의 Sub Row 인덱스는 항상 "0" 이 됩니다.

- 합병(Merge) 된 Cell은 합병된 첫번째 Cell 의 Sub Row 인덱스를 갖습니다.

cursor

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

지원 환경

속성 타입

문법

Grid.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.Grid00.cursor = "default";

참고

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

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

enable

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

지원 환경

속성 타입

문법

Grid.enable[= benable]

문법 설정

benable ::= 'true' | 'false'

this.Grid00.enable = true; 
this.Grid00.enable = false;

참고

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

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

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

enableevent

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

지원 환경

속성 타입

문법

Grid.enableevent[= bEvent]

문법 설정

bEvent ::= 'true' | 'false'

this.Grid00.enableevent = true;  

this.Grid00.enableevent = false;

참고

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

enableredraw

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

지원 환경

속성 타입

문법

Grid.enableredraw[= bRedraw]

문법 설정

bRedraw ::= 'true' | 'false'

this.Grid00.enableredraw = true;
this.Grid00.enableredraw = false;

참고

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

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

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

extendsizetype

autosizingtype 속성에 의해 Row 의 높이가 자동조절될 때 각 Row 별로 따로 조절 할 지 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.extendsizetype[= enumType]

문법 설정

enumType ::= 'none' | 'row'

this.Grid00.extendsizetype = "row";

참고

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

- band 속성값이 "body" 인 Row 에만 적용되는 속성입니다.

- 한 개의 Row 가 두 줄 이상으로 디자인 되었다면 각 줄에서 가장 높이가 큰 Cell 을 모두 합친 높이가 Row 의 높이가 됩니다.

- cellsizingtype 속성값을 설정하면 마우스로 Row 의 높이 변경이 가능합니다.

활용 예제

• 스크롤바가 생기지 않게 Grid 컴포넌트의 높이 조정하기

• Grid 컴포넌트의 Row 높이를 직접 지정하기

• Cell 크기 조절하기 (특정 Row 크기 조절)

fastvscrolltype

Grid 에서 세로 스크롤 시 팝업으로 표시되는 Row 의 위치를 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.fastvscrolltype[= enumType]

문법 설정

enumType ::= 'default' | 'topdisplay' | 'centerdisplay' | 'topbottomdisplay' | 'topcenterbottomdisplay' | 'trackbarfollow'

this.Grid00.fastvscrolltype = "trackbarfollow";

참고

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

- 세로 스크롤 시 표시되는 데이터의 갯수를 제한하여 스크롤 성능을 향상시키기 위하여 사용하는 속성입니다.
  스크롤 중에는 팝업으로 표시된 Row 에 스크롤된 위치의 데이터가 갱신되어 표시되고, 스크롤이 종료되면 전체 데이터가 Grid 에 표시됩니다.

- Desktop 환경에서는 TrackBar 로 스크롤 시 해당 기능이 활성화 됩니다.
   Mobile 환경에서는 Flip 으로 스크롤 시 해당 기능이 활성화 됩니다.

- 팝업으로 표시되는 Row 의 높이는 디자인 시 정의된 포맷의 Row 높이가 적용됩니다.

활용 예제

• Smart Scroll 기능 사용하기

fillareatype

Grid 에서 데이터가 없는 영역이 표시되는 방식을 설정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.fillareatype[= enumFilltype]

문법 설정

enumFilltype ::= 'none' | 'linerow' | 'datarow' | 'controlrow' | 'allrow'

this.Grid00.fillareatype = "linerow";

참고

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

- Grid 의 크기보다 DataSet 의 데이터가 적을 때 Grid 내의 하단 빈공간을 어떻게 표시할지 결정하는 속성입니다.

- "datarow" 와 "controlrow" 의 구분은 displaytype 속성값의 종류에 따라 구분합니다.

- 바인드 된 DataSet 에 데이터가 없는 경우 fillareatype 속성값에 따라 Grid 가 표시됩니다.

활용 예제

• 데이터가 없는 영역을 채우기

flexgrow

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

지원 환경

속성 타입

문법

Grid.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"이면 수직축)에 컴포넌트가 배치되는 영역이 컨테이너 영역을 초과하지 않도록 설정한 비율만큼 나누어 컴포넌트의 크기를 재조정하는 속성입니다.

지원 환경

속성 타입

문법

Grid.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

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

지원 환경

속성 타입

문법

Grid.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.Grid00.font = "bold 12pt/30px arial, sans-serif";