ExtJs之Ext.Template

最新推荐文章于 2018-07-24 13:14:37 发布

转载最新推荐文章于 2018-07-24 13:14:37 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/45158

文章标签：

#javascript #ViewUI

本文展示了一个使用ExtJs框架的模板引擎实例，通过简单的HTML和JavaScript代码实现了动态表格的生成，展示了如何利用ExtJs的Template组件填充数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html>

<head>

    <title>ExtJs</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">

      <script type="text/javascript" src="ExtJs/ext-all.js"></script>

      <script type="text/javascript" src="ExtJs/bootstrap.js"></script>

      <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

</head>

<body>

<script type="text/javascript">
 
Ext.onReady(function(){

  var tpl = new Ext.Template(

    '<table border=1 cellpadding=2 cellspacing=2>',

    '<tr><td width=90>姓名</td><td width=90>{0}</td></tr>',

    '<tr><td>年纪</td><td>{1}</td></tr>',

    '<tr><td>性别</td><td>{2}</td></tr>',

    '</table>'

  );

  tpl.append('tpl-table', ['小王',25,'男']);
});

</script>

<body>

  <div id="tpl-table">

    <div>员工信息</div>

  </div>

</body>

</html>