我们的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函数中完成。

时间紧任务重---extjs的学习就这么开始吧的更多相关文章

  1. Extjs的学习及MIS系统实践应用

    Extjs的学习及MIS系统实践应用(系列文章) 本系列文章从Extjs的实际运用出发,结合系统开发的实践经验,详细解释Extjs的基本控件及控件扩展的用法,和在平时的学习运用中一步一步查阅的资料.积 ...

  2. Extjs的学习及MIS系统实践应用（系列文章）

    本系列文章从Extjs的实际运用出发,结合系统开发的实践经验,详细解释Extjs的基本控件及控件扩展的用法,和在平时的学习运用中一步一步查阅的资料.积累经验的集锦.标题及链接奉上,用一个小程序,开启了 ...

  3. Extjs MVC学习随笔01

    Extjs Mvc模式下的整个MVC框架体系即下图: 包含了Controller(实现方法层),Store(数据来源管理层),View(页面布局层).之所以用MVC我想是因为减轻针对某一页面的单一的J ...

  4. ExtJS MVC学习手记

    开始学习ExtJS的MVC了.这篇文章仅是用来做一个目录,为自己这个阶段的学习内容做个索引. 手记涉及的文章: EXTJS MVC结构(译自ExtJS4.0文档中的<MVC Architectu ...

  5. 【旧文章搬运】PE重定位表学习手记

    原文发表于百度空间,2008-11-02========================================================================== 先定义一下 ...

  6. ExtJS MVC 学习手记3

    在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树.但也仅仅是这样,点击树或应用的其他地方获得不到任何响应.这个演示应用还是一个死的应用. 接下来,我们让这个应用活起来. 首先,给 ...

  7. ExtJS MVC学习手记 2

    开发环境 eclipse(indigo) ExtJS4.0 开发目标 使用store.model和controller创建菜单树 开发步骤 之前我们已经建立了一个MVC的项目框架.现在要做的就是在这个 ...

  8. ExtJS MVC学习手记 1

    开发环境: ExtJS4.2 eclipse indigo 开发目标  搭建项目框架,创建viewport 开发步骤说明 这次主要使用extjs4的mvc模式创建viewport.籍此初步了解mvc模 ...

  9. Extjs 4学习2

    主要学习采自:http://www.ishowshao.com/blog/2012/06/19/extjs-4-getting-started/ 用的sdk为extjs4.2.1 根据其中的提示装了一 ...

随机推荐

  1. 2015上海赛区B Binary Tree

    B - Binary Tree   Description The Old Frog King lives on the root of an infinite tree. According to ...

  2. 面试时，当你有权提问时，别客气，这是个逆转的好机会（内容摘自Java Web轻量级开发面试教程）

    前些天,我在博客园里写了篇文章,如何在面试中介绍自己的项目经验,收获了2千多个点击,这无疑鼓舞了我继续分享的热情,今天我来分享另外一个面试中的甚至可以帮助大家逆转的技巧,本文来是从 java web轻 ...

  3. 记Javascript的编写方式的全新学习

    前言 这次有幸参与前端的工作,对于前端开发学习了不少新知识,在此记录一下相比之前,完全不同的Javascript编写方式. 原来的编写方式 之前也是写过Javascript,就是常见的.js 文件写函 ...

  4. 【机器学习实战】第13章 利用 PCA 来简化数据

    第13章 利用 PCA 来简化数据 降维技术 场景 我们正通过电视观看体育比赛,在电视的显示器上有一个球. 显示器大概包含了100万像素点,而球则可能是由较少的像素点组成,例如说一千个像素点. 人们实 ...

  5. LNMP架构部署

    第1章 部署LNMP架构步骤 1.1 ①部署Linux系统(OK) 基本优化完成(ip地址设置 yum源更新 字符集设置) 安全优化完成(iptables关闭 selinux关闭 /tmp/ 1777 ...

  6. 二：熟悉 TCP/IP 协议

    一篇文章带你熟悉 TCP/IP 协议(网络协议篇二) 同样的,本文篇幅也比较长,先来一张思维导图,带大家过一遍. 一图看完本文 一. 计算机网络体系结构分层 计算机网络体系结构分层计算机网络体系结构分 ...

  7. 很考验人的java内存加载面试题

    源代码如下,求结果 public class MemoryAnalyse { public static int k = 0; public static MemoryAnalyse t1 = new ...

  8. Java中Comparable和Comparator比较

    1.Comparable 介绍 Comparable 是一个排序接口,如果一个类实现了该接口,说明该类本身是可以进行排序的.注意,除了基本数据类型(八大基本数据类型) 的数组或是List,其余类型的对 ...

  9. 设计模式的征途—9.组合（Composite）模式

    树形结构在软件中随处可见,比如操作系统中的目录结构,公司组织结构等等,如何运用面向对象的方式来处理这种树形结构是组合模式需要解决的问题.组合模式通过一种巧妙的设计方案来使得用户可以一致性地处理整个树形 ...

  10. C#设计模式之十五命令模式（Command Pattern）【行为型】

    一.引言   今天我们开始讲"行为型"设计模式的第二个模式,该模式是[命令模式],又称为行动(Action)模式或交易(Transaction)模式,英文名称是:Command P ...