基礎(chǔ)篇(4)：ExtJs中的模板詳解

北風(fēng)網(wǎng)項目培訓(xùn)基礎(chǔ)篇(4)：ExtJs中的模板詳解講師：風(fēng)舞煙ExtJs版國訊教育通用智能OA辦公平臺目錄Ext.DomHelper簡介Template語法使用簡介Template簡單應(yīng)用Template中使用轉(zhuǎn)換函數(shù)使用模板的自定義接口XTemplate應(yīng)用復(fù)雜模板綜合應(yīng)用Ext.DomHelper處理DOM或模板（Templates）的實用類。能以JavaScript較清晰地編寫HTML片段（HTMLfragments）或DOM。如以下范例產(chǎn)生五個子元素的無須列表，追加到當(dāng)前元素‘my-div’：常用方法Template語法使用簡介在一些復(fù)雜的情況下，我們需要生成HTML片斷，這時最常用，最簡單，最有效率的一種做法就是應(yīng)用Ext提供的模板來完成。說明：Templete

是模板之意，就是定義一段HTML代碼，并放置若干個{}作為占位符，運行

時將數(shù)據(jù)填充到{}中去?？磥砜慈ィ蚸ava中的MessageFormat及C#中的string.formate很像。XTemplate和DomHelper有很深的淵源，DomHelper是XTemplate的小弟，DomHelper解決不了的事情，XTemplate一定可以。

使用XTemplate一般會經(jīng)歷三個步驟：

1、定義XTemplate對象，指定一段HTML代碼作為模板；

2、指定XTemplate中定義的HTML應(yīng)該放置的位置，并填充占位符信息；

3、編譯XTemplate。Template簡單應(yīng)用Ext.onReady(function(){

var

xt=newExt.Template(

"<tableborder={0}width={1}>",

"<tr>",

"<td>{2}</td>",

"<td>{3}</td>",

"<td>{4}</td>",

"</tr>",

"</table>"

);

xt.append("xt",[1,300,'單元格1','單元格2','單元格3']);

pile();

})

頁面如下：

<divid="xt"></div>

實例化Template時，可以配置任意個參數(shù)，會自動連接到一起，這種寫法似乎更方便

更好讀。append方法同DomHelper

的append方法，實際上還有insertBefore、insertAfter、

insertFirst、overwrite等方法，不同的是第二個參數(shù)，該參數(shù)是要填充到占位符中的數(shù)據(jù)，

可以是數(shù)組，也可以是json對象。執(zhí)行完之后得到如下結(jié)果：<divid="xt">

<tableborder="1"width="300">

<tbody>

<tr>

<td>單元格1</td>

<td>單元格2</td>

<td>單元格3</td>

</tr>

</tbody>

</table>

</div>下面是改造后的例子，填充數(shù)據(jù)時用json對象代替了原來的數(shù)組：

Ext.onReady(function(){

var

xt=newExt.Template(

"<tableborder=width={w}>",

"<tr>",

"<td>{v1}</td>",

"<td>{v2}</td>",

"<td>{v3}</td>",

"</tr>",

"</table>"

);

xt.append("xt",{b:1,w:300,v1:"單元格1",v2:"單元格2",v3:"單元格3"});

pile();

})Template中使用轉(zhuǎn)換函數(shù)eg:varxt=newExt.Template("<tableborder=width={w}>","<tr>","<td>{v1}</td>","<td>{v2:trim}</td>","<td>{v3:ellipsis(4)}</td>","</tr>","</table>");xt.append("xt",{b:1,w:300,v1:'單元格1',v2:'單元格2',v3:'單元格3'});pile();目錄Ext.DomHelper簡介Template語法使用簡介Template簡單應(yīng)用Template中使用轉(zhuǎn)換函數(shù)使用模板的自定義接口XTemplate復(fù)雜模板綜合應(yīng)用JavaScript代碼

vardata=[['1','male','name1','descn1'],['2','female','name2','descn2'],['3','male','name3','descn3'],['4','female','name4','descn4'],['5','male','name5','descn5']];

vart=newExt.Template('<tr>','<td>{0}</td>','<td>{1:this.renderSex}</td>','<td>{2:trim}</td>','<td>{3:ellipsis(10)}</td>','</tr>');

t.renderSex=function(value){if(value=='male'){return"<spanstyle='color:red;font-weight:bold;'>紅男</span><img

src='user_male.png'/>";}else{return"<spanstyle='color:green;font-weight:bold;'>綠女</span><img

src='user_female.png'/>";}};

pile();for(vari=0;i<data.length;i++){

t.append(Ext.get('some-element'),data[i]);}HTML代碼

<tableborder="1"><tbodyid="some-element"><tr><td>id</td><td>sex</td><td>name</td><td>descn</td></tr></tbody></table>目錄Ext.DomHelper簡介XTemplate語法使用簡介XTemplate簡單應(yīng)用XTemplate中使用轉(zhuǎn)換函數(shù)使用模板的自定義接口復(fù)雜模板綜合應(yīng)用XTemplate對Template的功能進(jìn)行了增強，XTemplate不僅支持在模板內(nèi)部使用子模板，還具有for和if的功能，可以讓我們在模板中實現(xiàn)循環(huán)和判斷等功能例4-3：1、界面HTML:<formid="f"></form>2、js:

vardata={name:'s',size:5,options:[{value:'河北',text:'河北省'},{value:'唐山',text:'唐山市'},{value:'路北',text:'路北區(qū)'}]};

vart=newExt.XTemplate('<selectname="{name}"size="{size}">','<tplfor="options"><optionvalue="{value:trim}">{text:ellipsis(10)}</option></tpl>','</select>');

t.append('f',data);例4-4：操作簡單數(shù)組Ext.onReady(function(){vardata={name:'s',size:5,options:['河北省','唐山市','路北區(qū)']};vart=newExt.XTemplate('<selectname="{name}"size="{size}">','<tplfor="options"><optionvalue="{.:trim}">{.:ellipsis(10)}</option></tpl>','</select>');t.append('f',data);});例4-5：

Ext.onReady(function(){vardata={name:"博客園",read:[{book:'<<ASP.net高級編程>>',date:'2007-7-7'},{book:"<<大話設(shè)計模式>>",date:"2006-6-6"}]}

//呈現(xiàn)組件

varmypanel=newExt.Panel({width:400,id:"mypanel",title:"XtemplateData簡單示例",renderTo:Ext.getBody()});//創(chuàng)建模板

vartpl=newExt.XTemplate('<table><tr><th>名稱:{name}</th></tr>',////對于一維單數(shù)據(jù)對象,直接用{名稱}輸出,'<tr><td>','<tplfor="read">',///對于多維對象(如擁有多條數(shù)據(jù)的表),'<p>編號:{#},書:{book},日期:{date}</p>','</tpl></td></tr></table>');//重寫綁定模板(//把數(shù)據(jù)填充到模板中去,并呈現(xiàn)到目標(biāo)組件)tpl.overwrite(mypanel.body,data);});簡要說明如下：1.pile();//可以在創(chuàng)建模板后,添加pile();編譯代碼,速度快點.

2.

tpl.overwrite(mypanel.body,data);//把數(shù)據(jù)填充到模板中去,并呈現(xiàn)到目標(biāo)組件

3.名稱:{name}//對于一維單數(shù)據(jù)對象,直接用{名稱}輸出,

4.,<tpl

for="read">//對于多維對象(如擁有多條數(shù)據(jù)的表),使用tpl和for配合使用,會使用tpl的格式把數(shù)據(jù)一條一條輸出,read為上級節(jié)點

5.{.}//對于一維對數(shù)據(jù)的對象,如color:

['Red',

'Blue',

'Black'],可以用{.}按照tpl模板逐一輸出,如:

'<tpl

for="color">',

'<div>

{.}</div>',

'</tpl>'

6.{#}//表示循環(huán)的索引

7.parent.***//在子對象中訪問父對象元素,使用parent,如:{}

8.if//'<tpl

if="age

>

1">',

'<p>{name}</p>',

'</tpl>',

//if實現(xiàn)有條件的邏輯判斷,很容易使用

9.其他幾個常用的參數(shù):

xindex//循環(huán)模板的當(dāng)前索引index（從1開始）,用[]。

xcount//循環(huán)模板循環(huán)的次數(shù)。

用[]

舉例:

'<tpl

for="read">',

'<p>編號:{#},書:{book},日期:{date},奇偶:{[xindex%2==0?"偶數(shù)":"奇數(shù)"]},次數(shù):{[xcount]}</p>',

'</tpl>'10.模板成員函數(shù)：

var

tpl

=

new

Ext.XTemplate(

'<tpl

for="kids">',

'<tpl

if="this.isGirl(name)">',

'<p>Girl:

{name}

-

{age}</p>',

'</tpl>',

'<tpl

if="this.isGirl(name)

==

false">',

'<p>Boy:

{name}

-

{age}</p>',

'</tpl>',

'</tpl></p>',

{

isGirl:

function(name){

return

name

==

'Sara

Grace';

},

isBaby:

function(age){

return

age

<

1;

}

});目錄Ext.DomHelper簡介XTemplate語法使用簡介XTemplate簡單應(yīng)用XTemplate中使用轉(zhuǎn)換函數(shù)使用模板的自定義接口復(fù)雜模板綜合應(yīng)用實例演示:用模板呈現(xiàn)服務(wù)器數(shù)據(jù)

Ext.onReady(function(){

var

mydata;

Ext.Ajax.request({

url:"getXtemplateData.ashx",//服務(wù)器端地址

success:function(request){

mydata=r