ExtJS의 XTemplate 사용하기

Ext JS 에서 제공하는 클래스중에 XTemplate 라는 클래스가 있습니다. XTemplate는 이름에서 알 수 있듯이 Array나 Object를 받아서 HTML코드를 찍어내는 역할을 합니다. 서버에서 데이터를 받아와서 반복적으로 똑같은 모양을 찍어낼 때 이 XTemplate를 사용하게 됩니다. 꽤나 유용하다고 할 수 있습니다.

아래와 같은 객체가 있다고 하겠습니다.

 1var data = [{
 2    lang: "Java",
 3    type: "Server",
 4    framework: ["Spring", "Struts", "Web work"],
 5    priority: 4
 6}, {
 7    lang: "Javascript",
 8    type: "Client",
 9    framework: ["Prototype", "jQuery", "Ext JS"],
10    priority: 3
11}];

간단히 2개의 JSON객체가 들어있는 Array타입의 변수를 정의하였습니다. 이 data가 이제 템플릿에 넣을 데이터입니다.

간단한 예제 템플릿은 아래와 같습니다.

 1var tpl = new Ext.XTemplate(
 2    '<tpl for=".">',
 3    '<h3>{lang} ({type}-side)</h3>',
 4    '<ul>',
 5        '<tpl for="framework">',
 6            '<li>{#}. {.}</li>',
 7        '</tpl>',
 8    '</ul>',
 9    '</tpl>'
10);

XTemplate는 new Ext.Xtemplate()로 생성하며 그 안에 파라미터로 탬플릿을 스트링으로 만들어서 콤마(,)로 구분하여 넣습니다. XTemplate()안에 들어 있는 것이 생성될 HTML덩어리가 된다고 할 수 있는데 여기서 <tpl for>구문은 루프가 돌아가게 되며 루프에 돌아갈 객체는 for에 지정해 주게 됩니다. 여기서 마침표(.)는 root객체를 의미하기 때문에 <tpl for=".">는 data안에 있는 객체전체를 루프를 돌리게 됩니다. 위의 data는 2개의 객체가 있으므로 2번 돌게 되고 </tpl>까지 루프를 돌게 됩니다. data에서 표시할 값은 {이름}으로 표시하게 됩니다.

다른 객체를 루프돌게 하려면 for안에 원하는 객체를 지정해 주면 됩니다. 위 소스를 보면 전체객체를 루프로 돌리게 되고 중간에 <ul>태그 안에서 framework만 한번더 루프를 돌게 되어 있습니다. framework안에서는 객체가 아닌 Array형태로만 되어 있기 때문에 루프가 돌 객체의 name이 지정안되어 있기 때문에 루트를 가르키는 {.}으로 표시하게 됩니다. {#}는 해당 루프의 인덱스를 자동으로 매겨줍니다.

 1<h3>Java (Server-side)</h3>
 2<ul>
 3    <li>1. Spring</li>
 4    <li>2. Struts</li>
 5    <li>3. Web work</li>
 6</ul>
 7<h3>Javascript (Client-side)</h3>
 8<ul>
 9    <li>1. Prototype</li>
10    <li>2. jQuery</li>
11    <li>3. Ext JS</li>
12</ul>

data로 템플릿을 돌리면 바로 위와같은 HTML코드가 나오게 됩니다.

Xtemplate내에서는 논리구문인 if문을 사용할 수 있는데 <tpl if=""></tpl>의 형식을 띄게 됩니다.

 1var tpl = new Ext.XTemplate(
 2    '<tpl for=".">',
 3    '<h3>{lang} ({type}-side)</h3>',
 4    '<tpl if="priority &gt; 3">',
 5        '<ul>',
 6            '<tpl for="framework">',
 7                '<li>{#}. {.}</li>',
 8            '</tpl>',
 9        '</ul>',
10    '</tpl>',
11    '</tpl>'
12);

1<!-- OUTPUT -->
2<h3>Java (Server-side)</h3>
3<ul>
4    <li>1. Spring</li>
5    <li>2. Struts</li>
6    <li>3. Web work</li>
7</ul>
8<h3>Javascript (Client-side)</h3>

위와같이 사용합니다. 4번라인에 if문이 추가되었습니다 priority가 3보다 클 경우에만 framework를 표시해주며 원래는 priority > 3의 형태가 되어야 하겠지만 >가 닫는 태그의 역할도 하기 때문에 정상적으로 작동하지 않는다면 >로 표시해 줍니다. if구문내에서 &&로 2개의 조건을 같이 사용하거나 ==로 값비교를 사용할 수 있습니다. 그리고 if문과 이어지는 내용은 아니지만 {}내에서는 일반적인 수식을 사용할 수 있습니다. {priority *2} 같은 형태로 + - * / 를 사용할 수 있습니다.

안타깝게도 if구문만 있고 else구문은 존재하지 않습니다. else가 필요하다면 if를 2개를 사용해야 하며 그 이상의 복잡한 내용이 필요하다면 XTemplate내부에 멤버함수를 포함할 수 있습니다.

 1var tpl = new Ext.XTemplate(
 2    '<tpl for=".">',
 3    '<h3>{lang} ({type}-side)</h3>',
 4    '<tpl if="this.checkValue(priority)">',
 5        '<ul>',
 6            '<tpl for="framework">',
 7                '<li>{#}. {.}</li>',
 8            '</tpl>',
 9        '</ul>',
10    '</tpl>',
11    '</tpl>',
12    {
13        checkValue: function(val) {
14            return val > 3;
15        }
16    }
17);

1<!-- OUTPUT -->
2<h3>Java (Server-side)</h3>
3<ul>
4    <li>1. Spring</li>
5    <li>2. Struts</li>
6    <li>3. Web work</li>
7</ul>
8<h3>Javascript (Client-side)</h3>

if문이 제약이 있기 때문에 복잡한 검사는 멤버변수를 이용해서 검사하면 더 용이하게 값을 체크할 수 있습니다.

이 외에 추가적인 기능을 사용할 수 있습니다.

values: 현재 스코프의 객체를 의미합니다.

parent: 현재 스코프보다 조상객체를 의미합니다.

xindex: 루프의 현재 인덱스

xcount: 루프의 전체 갯수

fm: Ext.util.Format의 별칭으로 Format의 함수들을 사용할 수 있습니다.

 1var tpl = new Ext.XTemplate(
 2    '<tpl for=".">',
 3    '<h3>{[values.lang.toUpperCase()]} ({type}-side) {[xindex]}/{[xcount]}</h3>',
 4    '<ul>',
 5        '<tpl for="framework">',
 6            '<li>{[xindex % 2 === 0 ? "*" : "#"]}. {[fm.uppercase(values)]} {parent.lang} Framework</li>',
 7        '</tpl>',
 8    '</ul>',
 9    '</tpl>',
10    {
11        checkValue: function(val) {
12            return val > 3;
13        }
14    }
15);

 1<!-- OUTPUT -->
 2<h3>JAVA (Server-side) 1/2</h3>
 3<ul>
 4    <li>#. SPRING Java Framework</li>
 5    <li>*. STRUTS Java Framework</li>
 6    <li>#. WEB WORK Java Framework</li>
 7</ul>
 8<h3>JAVASCRIPT (Client-side) 2/2</h3>
 9<ul>
10    <li>#. PROTOTYPE Javascript Framework</li>
11    <li>*. JQUERY Javascript Framework</li>
12    <li>#. EXT JS Javascript Framework</li>
13</ul>