ExtJs 4 – XTemplates
6322 단어 template
›
post
›
ExtJs 4 – XTemplates
ExtJs 4 – XTemplates
Posted on
April 30, 2011 by
Hans Doller
— No Comments ↓
If you’re an avid ExtJs developer like me, you’re bound to reach a point where you need to display an HTML view with dynamic variables. There are many scenarios like this. The most common example is a tabular grid or data view, but can range from a simple panel to an image gallery and beyond. So how does all this work?
A super simple example XTemplate looks like this: [ view sandbox online ] var myTemplate = new Ext.XTemplate( '<div class="special-window">', '<div class="title">{title}</div>', '<div class="content">{content}</div>', '</div>');
Right now, we have an XTemplate defined, but we’re not all the way there yet. The XTemplate is missing data, and it needs to be rendered before it can be used. Here’s one way that we can do this: var myHtmlTemplate = myTemplate.apply({ title: 'Special Window Title', content: 'Example window body text'});
At this point, we’ve rendered the template and stored it in a variable. The HTML produced will look something like this: <div class="special-window"> <div class="title">Special Window Title</div> <div class="content">Example window body text</div></div>
Ok, this is cool.. but what other tricks does it know? Well, the above code was an entry-level example to the world of the Ext.XTemplate. Rest assured this is merely the tip of an enormous ice berg. A more advanced implementation is needed when you have to deal with a multidimensional dataset. Let’s say, a user signature: [ view sandbox online ] var mySignature = { name: 'Hans Doller', department: 'Development', phoneNumbers: [ {number:'555-111-2222',rel:'office'}, {number:'555-111-2223',rel:'cellular'}, {number:'555-111-2224',rel:'home'} ], emailAddresses: [ '[email protected]', '[email protected]' ]};
As you can see, we’re dealing with some nested arrays, objects and string variables.. With normal Javascript and HTML, it would be a PITA to display. Never fear, XTemplate is here! Here’s what the template could look like: var mySignatureTemplate = new Ext.XTemplate( '<div class="signature">', '<div class="name">{name}</div>', '<div class="department">{department}</div>', '<ul class="phone">', '<tpl for="phoneNumbers">', '<li class="number">{number} ({rel})</li>', '</tpl>', '</ul>', '<ul class="email">', '<tpl for="emailAddresses">', '<li class="address"><a href="mailto:{.}">{.}</a></li>', '</tpl>', '</ul>', '</div>');
To render the template to a string, once again we do: var myHtmlSignature = mySignatureTemplate.apply(mySignature);
And voilà, the resulting HTML should look something like this: <div class="signature"> <div class="name">Hans Doller</div> <div class="department">Development</div> <ul class="phone"> <li class="number">555-111-2222 (office)</li> <li class="number">555-111-2223 (cellular)</li> <li class="number">555-111-2224 (home)</li> </ul> <ul class="email"> <li class="address"><a href="mailto:[email protected]">[email protected]</a></li> <li class="address"><a href="mailto:[email protected]">[email protected]</a></li> </ul></div>
This article covers the most basic parts of XTemplate usage, there are a lot of features that were not covered in this article. For a full list of features, check out the online XTemplate documentation . If you have any specific questions, feel free to comment on this article, and I’ll help out where I can.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Visual studio 2017에서 빨리 파이썬을 코딩
<<준비>> VS2017에서 Raspberry PI에 액세스할 수 있도록 한다.
/etc/samba/smb.conf에 추가
/etc/samba/smb.conf
samba 재부팅
새 프로젝트에서 템플릿 Bottle 웹...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
var myTemplate = new Ext.XTemplate( '<div class="special-window">', '<div class="title">{title}</div>', '<div class="content">{content}</div>', '</div>');
var myHtmlTemplate = myTemplate.apply({ title: 'Special Window Title', content: 'Example window body text'});
<div class="special-window"> <div class="title">Special Window Title</div> <div class="content">Example window body text</div></div>
var mySignature = { name: 'Hans Doller', department: 'Development', phoneNumbers: [ {number:'555-111-2222',rel:'office'}, {number:'555-111-2223',rel:'cellular'}, {number:'555-111-2224',rel:'home'} ], emailAddresses: [ '[email protected]', '[email protected]' ]};
var mySignatureTemplate = new Ext.XTemplate( '<div class="signature">', '<div class="name">{name}</div>', '<div class="department">{department}</div>', '<ul class="phone">', '<tpl for="phoneNumbers">', '<li class="number">{number} ({rel})</li>', '</tpl>', '</ul>', '<ul class="email">', '<tpl for="emailAddresses">', '<li class="address"><a href="mailto:{.}">{.}</a></li>', '</tpl>', '</ul>', '</div>');
var myHtmlSignature = mySignatureTemplate.apply(mySignature);
<div class="signature"> <div class="name">Hans Doller</div> <div class="department">Development</div> <ul class="phone"> <li class="number">555-111-2222 (office)</li> <li class="number">555-111-2223 (cellular)</li> <li class="number">555-111-2224 (home)</li> </ul> <ul class="email"> <li class="address"><a href="mailto:[email protected]">[email protected]</a></li> <li class="address"><a href="mailto:[email protected]">[email protected]</a></li> </ul></div>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Visual studio 2017에서 빨리 파이썬을 코딩<<준비>> VS2017에서 Raspberry PI에 액세스할 수 있도록 한다. /etc/samba/smb.conf에 추가 /etc/samba/smb.conf samba 재부팅 새 프로젝트에서 템플릿 Bottle 웹...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.