Grid 클래스의 주요 기능은 다음과 같습니다. 1. Grid 관련 클래스의 공통 기능을 제공합니다. 2. Grid 전체와 frame 엘리먼트를 생성하여 DOM Tree를 형성합니다. 3. field width를 Grid 범위내에서 균등 배분할 수 있습니다. 4. GridResizing, Calculator, BoxModel 오브젝트를 생성합니다. 5. Radio, CheckBox 이벤트를 설정하고 Fire시킵니다.
| Options | Component |
|---|---|
| adjustField {String} | grid.Grid |
|
options.width 값이 Grid에 표시할 각 필드의 width를 합산한 값보다 크거나 작은 경우
options.width에서 합산 값을 제외한 차이 길이를 adjustField에 지정한 필드에 설정합니다.
이때 이 값이 adjustMax보다 크거나 adjustMin 값보다 작으면 설정하지 않습니다.
단, Grid가 표시된 후에 사용자가 한 번이라도 필드의 width를 조정했다면
이 값이 우선해야 하므로 적용하지 않습니다.
이 값을 지정하면 allotEach보다 우선하여 적용합니다.
|
|
| adjustMax {Number} | grid.Grid |
|
adjustFiled에 값을 지정한 경우 자동으로 적용할 수 있는 최대 값
|
|
| adjustMin {Number} | grid.Grid |
|
adjustFiled에 값을 지정한 경우 자동으로 적용할 수 있는 최소 값
|
|
| allotEach {Boolean} | grid.Grid |
|
options.width 값이 Grid에 표시할 각 필드의 width를 합산한 값보다 크거나 작은 경우
options.width에서 합산 값을 제외한 차이 길이를 각 필드의 width 비율로 배분합니다.
정수 값으로 배분한 후 1과 같이 배분할 수 없는 나머지 값은 width가 가장 큰 필드에 배분합니다.
|
|
| autoChecked {Boolean} | grid.Grid |
detail 영역을 click했을 때 checked 설정/해제여부. default: true
true: mc.grid.GridCheckBox로 Grid에 checkbox를 설정한 경우,
detail 영역을 클릭하면 checkbox를 클릭한 것과 같은 처리를 행합니다.
checked된 상태이면 해제 처리를 행합니다.
checkbox가 하나인 경우에만 사용할 수 있으며 useCheckBox에도 true를 지정해야 합니다.
false: checkbox를 클릭해야만 check가 설정/해제 됩니다.
|
|
| ccode {String} | grid.Grid |
|
component code : 'grid'
|
|
| cellClass {String} | grid.Grid |
<td> 엘리먼트에 적용할 className
Grid인 경우 meta filed는 아래와 같은 구조로 되어 있으며 각 노드에 className과 style이 설정됩니다.
- DOM Tree
<tr class="checkedClass" style="checkedStyle">
<td class="mc-grid-dt-td cellClass" style="cellStyle">
<div class="fieldClass" style="fieldStyle">text
<input type="checkbox" class="typeClass" style="typeStyle" />
</div>
</td>
</tr>
위의 DOM Tree에서 볼 수 있듯이
- checkedClass와 checkedStyle은 radio/checkbox를 선택했을 때 <tr>에 설정되고
- cellClass와 cellStyle이 <td>에 설정되고
- fieldClass와 fieldStyle이 <div>에 설정됩니다.
- typeClass는 <input>에 설정합니다.
new mc.data.MetaField({
fields:[
{field: 'id', text: "Code", width: 70, style: 'color:red', hidden: true},
]
})
위와 같이 MetaField.fields에 작성한 width, style은 MethodChain 내부에서 cellStyle에 조합합니다.
MethodChain에서 설정하는 class와 style이 있으므로 이를 지정하기 전에 먼저 체크할 필요가 있습니다.
|
|
| cellStyle {Hash} | grid.Grid |
|
<td> 엘리먼트에 적용할 style
|
|
| createTitle {Boolean} | grid.Grid |
|
Grid Title 작성 여부
true: title option을 기준으로 Grid Title을 작성합니다.
false: title option을 작성하더라도 Grid Title을 작성하지 않습니다.
|
|
| fieldMinWidth {Number} | grid.Grid |
|
Grid 각 field의 최소 넓이. default : 25
|
|
| gridMinWidth {Number} | grid.Grid |
|
Grid 최소 넓이. default : 100
|
|
| gridBoxStyle {Hash} | grid.Grid |
|
gridBox 엘리먼트에 설정할 style
|
|
| headerOverClass {String} | grid.Grid |
|
header에서 mouseover/mouseout 이벤트가 발생했을 때 설정할 className.
default: 'mc-grid-hd-over'
|
|
| height {Number} | grid.Grid |
|
GridBox 높이
|
|
| metaField {String} | grid.Grid |
|
Grid 데이터 Format을 포함한 MetaField 오브젝트 이름.
new mc.data.MetaField를 지정하거나 이를 생성한 오브젝트 이름을 지정합니다.
metaField에 지정한 순서, 형태를 기준으로 Grid의 sub-title을 설정하며
이를 기준으로 Grid row의 형식이 결정됩니다.
자세한 내용은 mc.data.MetaField를 참조하세요.
|
|
| outsideClass {String} | grid.Grid |
|
Grid outside 엘리먼트에 반영할 className
|
|
| outsideStyle {Hash} | grid.Grid |
|
Grid outside 엘리먼트에 반영할 style
|
|
| prefix {String} | grid.Grid |
|
id 접두사. default: 'mc_grid_'
|
|
| title {Hash} | grid.Grid |
|
Grid 타이틀에 설정할 options
|
|
| Method | Component |
|---|---|
mc.grid.Grid
(Hash)
|
grid.Grid |
|
생성자
|
|
mainGrid
(HTMLElement/String)
|
grid.Grid |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
clickGrid
(EventObject, HTMLElement, Hash)
|
grid.Grid |
|
click 이벤트가 발생했을 때 실행합니다.
|
|
dbClickGrid
()
|
grid.Grid |
|
dbclick 이벤트가 발생했을 때 실행합니다.
|
|
getDragGroupNode
() : HTMLElement
|
grid.Grid |
|
drag group node를 반환합니다.
|
|
getFirstNode
() : HTMLElement
|
grid.Grid |
|
header에 표시된 첫 번째 <td> 엘리먼트를 반환합니다.
|
|
getOutside
() : HTMLElement
|
grid.Grid |
|
Grid의 최상위 parent 엘리먼트를 반환합니다.
|
|
getlistBox
() : HTMLElement
|
grid.Grid |
|
listBox 엘리먼트를 반환합니다.
|
|
getResizingNode
() : HTMLElement
|
grid.Grid |
|
resizing을 위한 drag node를 반환합니다.
|
|
keydownGrid
(EventObject, HTMLElement, Hash)
|
grid.Grid |
|
keydown 이벤트가 발생했을 때 실행합니다.
|
|
mousedownGrid
(EventObject, HTMLElement, Hash)
|
grid.Grid |
|
mousedown 이벤트가 발생했을 때 실행합니다.
|
|
| Custom Event | Component |
|---|---|
| clickRadio (EventObject e, HTMLElement tg, Hash opts, Object this) | grid.Grid |
|
grid row의 radio를 체크/해제했을 때 fire됩니다.
|
|
| clickCheckbox (EventObject e, HTMLElement tg, Hash opts, Object this) | grid.Grid |
|
grid row의 checkbox를 체크/해제했을 때 fire됩니다.
|
|
| headerCheckbox (EventObject e, HTMLElement tg, Hash opts, Object this) | grid.Grid |
|
grid header의 checkbox를 체크/해제했을 때 fire됩니다.
|
|
| keydownCheckbox (EventObject e, HTMLElement tg, Hash opts, Object this) | grid.Grid |
|
grid row의 checkbox를 keydown했을 때 fire됩니다.
|
|
| keydownRadio (EventObject e, HTMLElement tg, Hash opts, Object this) | grid.Grid |
|
grid row의 radio를 keydown했을 때 fire됩니다.
|
|