我们的extjs借助了一个模板引擎--artTemplate，它是一个开源的项目，不多说，给个链接吧：http://aui.github.io/artTemplate/
直接上代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>loading...</title>
<link href="resources/css/ext-all-debug.css" rel="stylesheet" type="text/css" />
<link href="resources/css/base.css" rel="stylesheet" type="text/css" />
<link href="resources/css/frame.css" rel="stylesheet" type="text/css" />
</head>
<body style="zoom: 1"> <script id="template-nav-header" type="text/html"> <div class="header">
<a class="brand logo" href="javascript:;" onclick="mc.frame.ui.selected.header();"><? if (data.logo || data.logo != '') { ?><img src="<?=data.log ?>" /><? } ?><?=data.title ?></a>
<nav>
<? for (var i = 0; i < data.nav.length; i++) { ?>
<li class="<? if (data.nav[i].nodes) { ?>more<? } ?>" tabindex="0" hidefocus="true">
<a data-ajax="true" <?=createAttribute(data.nav[i]) ?>>
<?include('template-nav-icon', {data: data.nav[i]}) ?>
<?=data.nav[i].name ?>
</a>
<? if (data.nav[i].nodes) { ?>
<?include('template-nav-header-more', {data: data.nav[i].nodes}) ?>
<? } ?>
</li>
<? } ?>
</nav> <nav class="user-info" id="userinfo">
</nav>
</div> </script> <script id="template-nav-header-more" type="text/html">
<?
var column = data.length > 7 ? 7 : data.length;
?>
<ul class="more-nav column<?=column ?>" style="width: <?=column * 150 ?>px;">
<? for (var i = 0; i < data.length; i++) { ?>
<li>
<a data-ajax="true" <?=createAttribute(data[i]) ?>>
<?include('template-nav-icon', {data: data[i]}) ?>
<?=data[i].name ?>
</a>
</li>
<? } ?>
</ul>
</script> <script id="template-nav-userinfo" type="text/html"> <li class="<? if (data.nodes) { ?>more<? } ?>" tabindex="0" hidefocus="true">
<a href="javascript:;"><?=data.nickname ?></a>
<? if (data.nodes) { ?>
<ul class="more-nav column1">
<? for (var i = 0; i < data.nodes.length; i++) { ?>
<li><a data-ajax="true" <?=createAttribute(data.nav[i])?>>修改密码</a></li>
<? } ?>
</ul>
<? } ?>
</li> </script> <script id="template-nav-aside" type="text/html">
<aside id="aside" class="aside">
<? for (var i = 0; i < data.length; i++) { ?>
<nav>
<? if (data[i].nodes) { ?>
<details open="true">
<summary>
<?include('template-nav-icon', {data: data[i]}) ?>
<?=data[i].name ?>
</summary>
<?include('template-nav-aside-nodes', {data: data[i].nodes}) ?>
</details>
<? } else { ?>
<?include('template-nav-aside-nodes', {data: [data[i]]}) ?>
<? } ?>
</nav>
<? } ?>
</aside>
</script> <script id="template-nav-aside-nodes" type="text/html">
<? for (var i = 0; i < data.length; i++) { ?>
<a data-ajax="true" <?=createAttribute(data[i]) ?>>
<?include('template-nav-icon', {data: data[i]}) ?>
<?=data[i].name ?>
</a>
<? } ?>
</script> <script id="template-nav-icon" type="text/html">
<? if (data.icon) { ?>
<img src="<?=data.icon ?>">
<? } ?>
</script> <script src="resources/js/lib/jquery-1.10.2.min.js"></script>
<script src="resources/js/lib/ext-all-dev.js"></script>
<script src="resources/js/lib/ext-lang-zh_CN.js"></script>
<script src="resources/js/lib/template.min.js"></script>
<script src="resources/js/user/template-helper.js"></script>
<script>
template.openTag = "<?";
template.closeTag = "?>";
</script> <script src="app/app/admin.js"></script> </body>
</html>
可以看到js模板引擎的影子了，头部和左侧栏的显示就靠他了。一个最主要的文件 app/app/admin.js，这个是配置文件:
//系统配置，文件与类名对应的配置
Ext.Loader.setConfig({
enabled: true,
paths: {
'mc': 'core',
'admin': 'app',
'custom': 'custom'
}
});//开启动态加载 Ext.application({
name: 'admin', //定义名字空间
requires: ['custom.panelTab', 'mc.grid.PageCombo'],
controllers: [ //加载控制层依赖
'AdminController'
],
autoCreateViewport: true
});
path的配置很重要，项目目录和js的名字空间的对应关系就在这里了。有一点需要说一下，项目中的文件名要和文件中的名字空间保持一致，因为在mvc模式下所有文件都是按需加载的，如果不一致的话会报404错误。
另一个重要文件就是app/controller/AdminController.js了，所有代码逻辑的入口，各种数据的初始化都在init函数中完成。