Extjs Template 사용하기
머리글
Ext UI 를 다루다 보면 중간 중간 객체에 문자열을 입력을 할 때 {0}, {id} 와 같은 형태로 중간에 들어가 있는 것을 볼 수 있다.
이런 것은 대부분 내부적으로 Ext.Template 클래스를 사용한다. 그래서 실제 템플릿은 두고 변하는 부분만 변수화 시켜서 대입하는 방식으로 많은 문자열이 쓰일 때 편하게 작업 할 수 있다.
이번에는 Ext.Template 클래스에 대해서 알아보자..
기본적인 Template 사용 방법
var str = "<html><head>{head}</head><body>{body}</body></html>";
var tp = new Ext.Template(str);
위와 같은 형태로 template 객 체를 생성한다.
template에 적용될 변수는 {변수} 와 같은 형태로 입력된다.
나중에 다른 문자열로 대체될 부분이다.
속도를 좀 더 빠르게 하고 싶다면
tp.compile();
해서 미리 컴파일 해두면 파싱 작업 없이 바로 바로 텍스트를 수정 할 수 있다.
Element에 템플릿 텍스트 넣기
그렇다면 이제 실제 element에 template로 작성한 문자열을 넣어보도록 하자 .
var tp = new Ext.Template(
"<div id='{div_id}'>",
"<span id='{span_id}' class='{cls}'>{content}</span>",
"</div>"
);
tp.append('아이디', {div_id : 'top', span_id : 'content',
cls : 'icon', content : '안녕'});
위와 같은 코드를 실행하면
<div id='top'><span id='content' class='icon'>안녕</span></div>
과 같은 형태로 문자열이 만들어 지고 이것은 '아이디' element의 내용에 추가되어진다.
추가되어질때는 html 형태 그대로 추가된다.
Template 테스트 바로 얻어오기
var tp = new Ext.Template('텍스트{name}');
var str = tp.applyTempate({name:'홍길동'});
변환된 값을 바로 문자열로 리턴해줍니다.
Template 텍스트의 몇가지 속성들
숫자 형태로 위치 지정하기
위의 예제들은 단순히 {id} 와 같은 형태로 문자열 형태로 변수를 지정하였습니다.
하지만 {0}, {1} 과 같은 숫자 형태로 변환할 수 있습니다.
var str = "안녕하세요, 전 {0} 입니다. 그동안 안녕하셨죠? {1}씨? ";
var tp = new Ext.Template(str);
tp.append('아이디', { name1: '꺽정', name2 : '길동' });
옵션에 대해서 0, 1 과 같은 순서 형태로도 지원을 할 수 있습니다.
변수 변환할 때 함수 사용하기
var str = "안녕하세요, 전 {name1:stripTags} 입니다. 그동안 안녕하셨죠? {name2:trim}씨? ";
var tp = new Ext.Template(str);
tp.append('아이디', { name1: '꺽정', name2 : '길동' });
변수명 뒤에 실행할 함수들이 : 를 구분으로 지정이 됩니다.
그러면 각각의 변수에 해당하는 값은 함수에 적용이 되어진 값으로 변환이 되서 실제 텍스트로 바뀝니다. 여기서 사용되는 함수들은 모두 Ext.util.Format 에 있는 함수들입니다.
{변수명[:함수명(매개변수,...)]}
위의 형식과 같은 형태로 지정 해주시면 됩니다.
Ext.util.Format 을 보시면 각각의
메소드들이 처음 매개변수로 string을 포함하고 있는데요 이것은 템플릿으로 변환되는 텍스트 이기 때문에 실제로 템플릿 상에서
함수를 사용 할 때는 두번째 매개변수 부터 적어주시면 됩니다. 만약 두번째 매개 변수가 없다면 적지 않으셔도 됩니다.
ex){name1:ellipsis(2)}
- Ext.util.Format.ellipsis(String value, Number length) ...
{name1:trim}
- Ext.util.Format.trim(Strint value) ....
Template로 변환된 텍스트 넣는 위치 지정하기
현재까지 알아 본 것은 append 메소드로만 넣는 것을 봤습니다.
append
:지정된 element 안의 내용에서 가장 뒤에 추가합니다.
ex) <div id='test'>aaa</div>
tp.append('test', ...)
와 같은 형태로 하면 tp에 있는 내용들이 aaa 뒤에 들어가게 됩니다.
insertAfter
: 지정된 element 의 뒤에 추가합니다.
ex) <div id='test'>aaa</div>
tp.insertAfter('test', ...)
와 같은 형태로 하면 tp에 있는 내용들이 <div id='test'>aaa</div>~ 뒤에 들어갑니다.
insertBefore
: 지정된 element 의 뒤에 추가합니다.
ex) <div id='test'>aaa</div>
tp.insertBefore('test', ...)
와 같은 형태로 하면 tp에 있는 내용들이 ~ <div id='test'>aaa</div> 앞에 들어갑니다.
insertFirst
: 지정된 element의 하위 노드들 중에 첫번째 요소로 들어갑니다.
ex)
<div id='test'>
<span id='a'></span>
<span id='b'></span>
<span id='c'></span>
</div>
tp.insertFirst('test', ...)
와 같은 형태로 하면 tp에 있는 내용들이
<div id='test'>
~ // 여기에 들어갑니다.
<span id='a'></span>
<span id='b'></span>
<span id='c'></span>
</div>
overwrite
: 지정된 element의 내용을 전부 교체합니다.
와 같은 형태로 하면 tp에 있는 내용들이 <div id='test'>~</div> 안에 있는 내용이 모두 바뀝니다.ex)
<div id='test'>aaa</div>
tp.overwrite('test', ...)
'Scripter > EXTJS' 카테고리의 다른 글
| Extjs Sample :: 기본문서구조 (0) | 2008.02.18 |
|---|---|
| Extjs Qtips 사용하기 (0) | 2008.02.18 |
| Extjs 단축키 지정 (0) | 2008.02.18 |
| Extjs 기본 DomQuery (0) | 2008.02.18 |
| Extjs 초보자를 위한 애플리케이션 레이아웃(2.02) (8) | 2008.02.17 |