[API/UI]

Panel

개요

Panel 클래스는 Panel 형태의 frame을 제공합니다.
Panel 클래스의 주요 기능은 아래와 같습니다.
1. Panel 형태의 구조적인 Frame을 제공합니다.    
    - title frame
    - top, center, bottom, footer frame
        component는 center에 설정되며 buttons는 bottom에 설정됩니다.
    - Panel frame 구조도
        +--------------------+  outside
        |       title                      
        |--------------------|
        |         |  top                 
        |         |------------- |
        |         |  center             
        | inside --------------|
        |         |  bottom            
        |         |------------- |
        |         |  footer              
        +---------+----------+

2. frame 단위로 options를 작성할 수 있습니다.
    - 이는 frame 단위로 component를 작성할 수 있다는 의미이며 ccode를 기준으로 컴포넌트를 생성합니다.
    - 컴포넌트에 속한 HTMLElement의 parent는 frame 이름이 됩니다.
Options Component
autoScroll {Boolean} panel.Panel
자동 스크롤 생성 여부. default: false
true: height가 넘치면 자동으로 스크롤 바를 설정합니다.
false: 설정하지 않고 overflow 처리를 합니다.
ccode {String} panel.Panel
component code : 'panel'
createTitle {Boolean} panel.Panel
Title 작성 여부. default: true
true: title 프로퍼티를 작성하지 않더라도 Title 클래스를 생성합니다.
false: title 프로퍼티를 작성했더라도 Title 클래스를 생성하지 않습니다.
height {Number} panel.Panel
panel height
panel height가 되며 이 값에서 각 frame의 height 값을 제외한 값이 center height로 설정됩니다.
html {String|Hash|JSON} panel.Panel
innerHTML 실행 결과를 frame 엘리먼트에 첨부합니다.
frame 프로퍼티에 작성하지 않고 options에 작성하면 center frame에 설정됩니다.
frame 프로퍼티에 className, style을 작성하면 frame 엘리먼트에 반영됩니다.

문자열 형태인 경우 innerHTML을 하므로 이전 content가 지워지며
JSON 또는 Hash 형태인 경우 차일드 엘리먼트로 첨부됩니다.

example
    - 문자열로 값을 지정한 형태
        html: '내용'
    - 문자열로 HTML 스크립트를 지정한 형태
        html: '<div class="foo" style="width: 100px">내용</div>
    - Hash 형태
        {template: '<div>{0}</div>', mapping: ['내용']}
        mapping 프로퍼티에 템플릿 인덱스에 mapping할 값을 지정합니다.
    - JSON 형태
        {tag: 'div', text: '내용'}
insideClass {String|Array} panel.Panel
panel inside 엘리먼트에 설정할 className
default: 'mc-panel-inside'
insideStyle {Hash} panel.Panel
panel inside 엘리먼트에 설정할 style
panelClass {String|Array} panel.Panel
panel outside에 설정할 className
default: 'mc-panel'
panelStyle {Hash} panel.Panel
panel outside에 설정할 style
prefix {String} panel.Panel
id 접두사. default: 'mc_panel_'
showBorder {Boolean} panel.Panel
frame간 border 표시 여부. default: false
ture: border-bottom을 표시하여 frame을 구분한다.
false: border-bottom을 표시하지 않는다.
width {Number} panel.Panel
panel width
일반적으로 Panel 자체에서 width를 설정하지 않고 이를 사용하는 클래스에서 설정하게 됩니다.
Method Component
mc.panel.Panel (Hash)
mc.panel.Panel(options)
생성자
Parameters :
• {Hash} options, Panel 클래스에 반영할 options
Returns :
• 없음
panel.Panel
생성자
mainPanel (HTMLElement/String)
mainPanel(showTo)
option 설정, HTMLElement생성, Event를 설정합니다.
Parameters :
• {HTMLElement/String} showTo, showTo 엘리먼트
Returns :
• 없음
panel.Panel
option 설정, HTMLElement생성, Event를 설정합니다.
getCenter () : HTMLElement
getCenter()
Panel.centerBox를 반환합니다.
Parameters :
• 없음
Returns :
• {HTMLElement}
panel.Panel
Panel.centerBox를 반환합니다.
getCenterWH () : Array
getCenterWH()
Panel.centerBox의 width와 height를 반환합니다.
border, padding을 제외한 값이 반환됩니다.
Parameters :
• 없음
Returns :
• {Array} [width, height]
panel.Panel
Panel.centerBox의 width와 height를 반환합니다.
getTitleNew () : Object
getTitleNew()
Title 오브젝트를 반환합니다
Parameters :
• 없음
Returns :
• {Object} Title 오브젝트
panel.Panel
Title 오브젝트를 반환합니다
Custom Event Component
 
 
Examples  
Panel  
frame 단위로 컴포넌트를 지정할 수 있습니다.