我们的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. 数位DP按位枚举模板

    借鉴:http://www.cnblogs.com/xz816111/p/4809913.html // pos = 当前处理的位置(一般从高位到低位) // pre = 上一个位的数字(更高的那一位 ...

  2. 网络基础四 DNS DHCP 路由 FTP

    第1章 网络基础 1.1 IP地址分类 IP地址的类别-按IP地址数值范围划分 IP地址的类别-按IP地址用途分类 IP地址的类别-按网络通信方式划分 1.2 局域网上网原理过程 DHCP原理过程详情 ...

  3. Python-week2，第二周（基于Python3.0以上）

    1,列表 存储数据我们可以使用变量,但是当有很多个数据的时候用变量就会出现很多的局限性,所以这时候就用到了列表.列表就是中括号里每个元素使用逗号隔开.列如     [1,2,3]     这就是一个列 ...

  4. AJAX 笔记

    一.什么是 AJAX ? AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种用于创建快速动态网页的技术. 通过 ...

  5. 一个简单的MVC框架的实现-基于注解的实现

    1.@Action注解声明 package com.togogo.webtoservice.annotations; import java.lang.annotation.Documented; i ...

  6. python 小白(无编程基础，无计算机基础)的开发之路 day1

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...

  7. Power BI连接SSAS(微软的分析服务)进行权限控制（本地部署）

    尬聊...... 在干活之前先尬聊一会儿 丸子我在10月下旬左右就开始弄power BI连接SSAS进行权限控制的问题,中间也是历经波折,看了网上很多资料,可是都是SSAS怎么进行权限控制,没有SSA ...

  8. Django 入门案例开发（下）——创建项目应用及模型类

    前面两章是在已经开发好的项目上用来描述环境和业务,这一章创建一个全新的项目来用作开发,你可以跟着我的步骤进行开发,如果有不理解的地方可以给我留言. 今天的任务是创建好项目和用户(users)应用及让它 ...

  9. [转] 深刻理解Python中的元类(metaclass)

    非常详细的一篇深入讲解Python中metaclass的文章,感谢伯乐在线-bigship翻译及作者,转载收藏. 本文由 伯乐在线 - bigship 翻译.未经许可,禁止转载!英文出处:stacko ...

  10. sharePreference

    源码分析请看:http://blog.csdn.net/yanbober/article/details/47866369 一.  SharePreferences是用来存储一些简单配置信息的一种机制 ...