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

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

var data = [{
    lang: "Java",
    type: "Server",
    framework: ["Spring", "Struts", "Web work"],
    priority: 4
}, {
    lang: "Javascript",
    type: "Client",
    framework: ["Prototype", "jQuery", "Ext JS"],
    priority: 3
}];

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



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

var tpl = new Ext.XTemplate(
    '<tpl for=".">',
    '<h3>{lang} ({type}-side)</h3>',
    '<ul>',
        '<tpl for="framework">',
            '<li>{#}. {.}</li>',
        '</tpl>',
    '</ul>',
    '</tpl>'
);

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

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

<h3>Java (Server-side)</h3>
<ul>
    <li>1. Spring</li>
    <li>2. Struts</li>
    <li>3. Web work</li>
</ul>
<h3>Javascript (Client-side)</h3>
<ul>
    <li>1. Prototype</li>
    <li>2. jQuery</li>
    <li>3. Ext JS</li>
</ul>

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



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

var tpl = new Ext.XTemplate(
    '<tpl for=".">',
    '<h3>{lang} ({type}-side)</h3>',
    '<tpl if="priority &gt; 3">',
        '<ul>',
            '<tpl for="framework">',
                '<li>{#}. {.}</li>',
            '</tpl>',
        '</ul>',
    '</tpl>',
    '</tpl>'
);

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

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

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

var tpl = new Ext.XTemplate(
    '<tpl for=".">',
    '<h3>{lang} ({type}-side)</h3>',
    '<tpl if="this.checkValue(priority)">',
        '<ul>',
            '<tpl for="framework">',
                '<li>{#}. {.}</li>',
            '</tpl>',
        '</ul>',
    '</tpl>',
    '</tpl>',
    {
        checkValue: function(val) {
            return val > 3;
        }
    }
);

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

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



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

var tpl = new Ext.XTemplate(
    '<tpl for=".">',
    '<h3>{[values.lang.toUpperCase()]} ({type}-side) {[xindex]}/{[xcount]}</h3>',
    '<ul>',
        '<tpl for="framework">',
            '<li>{[xindex % 2 === 0 ? "*" : "#"]}. {[fm.uppercase(values)]} {parent.lang} Framework</li>',
        '</tpl>',
    '</ul>',
    '</tpl>',
    {
        checkValue: function(val) {
            return val > 3;
        }
    }
);

<!-- OUTPUT -->
<h3>JAVA (Server-side) 1/2</h3>
<ul>
    <li>#. SPRING Java Framework</li>
    <li>*. STRUTS Java Framework</li>
    <li>#. WEB WORK Java Framework</li>
</ul>
<h3>JAVASCRIPT (Client-side) 2/2</h3>
<ul>
    <li>#. PROTOTYPE Javascript Framework</li>
    <li>*. JQUERY Javascript Framework</li>
    <li>#. EXT JS Javascript Framework</li>
</ul>

일반적으로 값을 표시하는{}안에 대괄호([])를 이용하여 원하는 값을 표시하거라 Javascript함수 또는 Extjs의 유틸리티 함수등을 사용할 수 있습니다.


XTemplate에 대한 자세한 내용은 API문서를 참고하면 됩니다. 기본적인 XTemplate에 대한 사용방법은 Public Methods부분의 XTemplate부분을 보면 자세하게 나와있습니다.