guide Html Layout

RealGrid-Touch 라이브러리가 제공하는 기본 layout들이 부족한 경우 직접 html로 데이터행을 표시할 수 있다. 두 가지 방식으로 구현할 수 있다.

1. 컨트롤 container의 element

리스트 컨트롤이 생성되는 container div의 자손 element로 작성하고, element의 id를 템플릿에 지정한다. layout으로 사용할 element들은 반드시 'rtc-renderers'라는 div의 자식으로 포함되어야 한다. 이 div 엘리먼트는 컨트롤 생성시 layout 용으로 준비된 후 제거된다.
html 구문 속에 템플릿에 기본 layout을 지정하는 것과 동일하게 param을 사용할 수 있다.

<html>
<body>
    <div id="realtouch">
        <div class="rtc-renderers">
            <div id="row">
                <div>
                    <span style="font-size:17px;font-weight:bold;color:#555;">${@NAME}</span>
                </div>
                <div>
                    <span style="font-size:14px;color:#777;">${@ADDR}</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

템플릿에서 layout type을 'html'로 지정하고, domid 속성에 element의 id를 설정한다.

const row_template = {
    template: {
        type: 'html',
        domid: 'row',
    }
};

2. inline html

템플릿 속성에 직접 html 구문을 설정한다.

const row_template = {
    template: {
        type: 'html',
        html: '<div id="row"><div><span style="font-size:17px;font-weight:bold;color:#559;">${@NAME}</span></div><div><span style="font-size:14px;color:#777;">${@ADDR}</span></div></div>'
    },
};

type은 생략할 수 있다.

const row_template = {
    template: {
        html: '<div id="row"><div><span style="font-size:17px;font-weight:bold;color:#559;">${@NAME}</span></div><div><span style="font-size:14px;color:#777;">${@ADDR}</span></div></div>'
    },
};

See Also

Layout 개요
템플릿 개요
HTML 렌더러