我们的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. git clone 带用户名密码的形式但包含@等特殊符号无法正常解析

    正常使用git clone 的方式 git clone https://remote 使用带用户名密码的方式(可以避免后续每次都要输入用户名密码) git clone https://[usernam ...

  2. 1.Introduction 介绍

    Welcome to Log4j 2! Introduction Almost every large application includes its own logging or tracing ...

  3. 常见的XSS攻击代码

    第一类: <tag on*=*/> 在html标签事件中触发,典型的是on*事件,但是这种触发模式的缺陷在于不能直接触发所以更多的需要配合使用. eg: 1.使html元素占据整个显示页面 ...

  4. js同时使用多个分隔符分割字符串.

    利用正则分割,str.split(/reg/);如果有这样一个字符串: "jb51.net,google.com,baidu.com_weibo.com_haotu.net", 我 ...

  5. ADO.NET中SqlCommand对数据库操作

    我们要不断地进行数据库的读写,那么ExecuteNonQuery(),ExecuteReader()与ExecuteScalar()就是我们在对数据库进行操作时要用到的,下面我来依次认识一下:     ...

  6. ES6中class关键字

    1 .介绍 //定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + th ...

  7. linux如何查看端口被谁占用

    1.查看端口是否被占用 [guosong@alice48 main]$ netstat -nlp|grep 6184 (Not all processes could be identified, n ...

  8. linux下大于2T硬盘格式化方法

    现在的硬盘很多都大于2T,但是linux自带的fdisk 工具无法格式化大于2T的磁盘,需要使用第三方工具parted,我们来看如何使用parted格式硬盘 1,可以先使用fdisk -l查看系统当前 ...

  9. canvas图表(4) - 散点图

    原文地址:canvas图表(4) - 散点图 今天开始完成散点图,做完这一节,我的canvas图表系列就算是完成了,毕竟平时最频繁用到的就是这几类图表了:柱状,折线,饼图,散点.经过编写canvas图 ...

  10. org.hibernate.validator.constraints.NotBlank' validating type 'java.lang.Integer

    使用hibernate时,在save方法时,报了:org.hibernate.validator.constraints.NotBlank' validating type 'java.lang.In ...