Ext.XTemplate

最新推荐文章于 2024-04-16 09:44:39 发布

抢街饭

最新推荐文章于 2024-04-16 09:44:39 发布

阅读量952

点赞数

分类专栏： ExtJs 文章标签： stylesheet html border function xhtml table

本文链接：https://blog.csdn.net/lzwjavaphp/article/details/6953899

版权

ExtJs 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Templete 是模板之意，就是定义一段 HTML 代码，并放置若干个{}作为占位符，运行
时将数据填充到{}中去。看来看去，和java中的MessageFormat很像。
XTemplate和DomHelper有很深的渊源，DomHelper是XTemplate的小弟，DomHelper
解决不了的事情，XTemplate一定可以。
使用XTemplate一般会经历三个步骤：
1、定义XTemplate对象，指定一段HTML代码作为模板；
2、指定XTemplate中定义的HTML应该放置的位置，并填充占位符信息；
3、编译Xtemplate

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJs整理</title>
<link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJs/adapter/ext-base.js"></script>
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/src/locale/ext-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">   
    Ext.onReady(function(){
		var xt = new Ext.XTemplate(
            "<table border={0} width={1}>",
                   "<tr>",
                          "<td>{2}</td>",
                          "<td>{3}</td>",
                          "<td>{4}</td>",
                   "</tr>",
            "</table>"
		);
		xt.append("xt", [1, 300, '单元格1', '单元格2', '单元格3']);
		xt.compile();
	});
</script>
<script type="text/javascript">   
    //下面是改造后的例子，填充数据时用json对象代替了原来的数组：
    Ext.onReady(function(){
		var xt = new Ext.XTemplate( 
		   "<table border={b} width={w}>", 
			"<tr>", 
			 "<td>{v1}</td>", 
			 "<td>{v2}</td>", 
			 "<td>{v3}</td>", 
			"</tr>", 
		   "</table>" 
	    ); 
	  xt.append("xt", {b: 1, w: 300, v1: "单元格1-1", v2: "单元格1-2", v3: "单元格1-3"}); 
      xt.compile(); 
	});
</script>  

<body>
	<div id="xt"></div>
	<div id="xt"></div>
</body>
</html>

运行结果如下：

抢街饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext.XTemplate

Templete 是模板之意，就是定义一段 HTML 代码，并放置若干个{}作为占位符，运行时将数据填充到{}中去。看来看去，和java中的MessageFormat很像。 XTemplate和DomHelper有很深的渊源，DomHelper是XTemplate的小弟，DomHelper解决不了的事情，XTemplate一定可以。使用XTemplate一般会经历三个步骤：
复制链接

扫一扫

专栏目录