我们的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. sass学习--安装ruby

    1.下载ruby:https://rubyinstaller.org/downloads/ 2.安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Promp ...

  2. 兼容IE、火狐、谷歌的页面关闭事件

    <html> <head> <script language="javascript"> var blnCheckUnload = true; ...

  3. PyCharm汉化、破解教程

    汉化 1.将 C:\Program Files (x86)\JetBrains\PyCharm 2017\lib(路径是你的安装路径)目录下的resources_en.jar文件复制出来之后删除,以备 ...

  4. MyEclipse和Eclipse非常方便的快捷键

    1. ctrl+shift+r:打开资源这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xml ...

  5. C语言实现快速排序法（分治法）

    title: 快速排序法(quick sort) tags: 分治法(divide and conquer method) grammar_cjkRuby: true --- 算法原理 分治法的基本思 ...

  6. [转载] Java集合框架之小结

    转载自http://jiangzhengjun.iteye.com/blog/553191 1.Java容器类库的简化图,下面是集合类库更加完备的图.包括抽象类和遗留构件(不包括Queue的实现): ...

  7. SQL Server 基本操作之三种增加法

    前言: 数据库操作避免不了对数据的操作,操作方法大同小异,万变不离其宗,今就写一下各种花式操作的根本增删改查四种操作,今天我们就来说一下增加操作的三种方法 正文: 增加操作是对数据库进行数据行的添加, ...

  8. CTF线下攻防赛

    SSH登陆 两三个人进行分工,一个粗略的看下web,有登陆口的话,就需要修改密码,将情况反馈给队友,让登陆ssh的小伙伴进行密码的修改,改成炒鸡复杂.然后将Web目录下载下来,上WAF.文件监控.端口 ...

  9. FreeRTOS 移植到WIN10

    背景 标题表述的不准确,大意是移植到WIN10的PC机,Intel I5. 最近因为项目接触了FreeRTOS 实时操作系统,想对这个操作系统有一个更深入的了解,所以决定下载源码看看,下面这个链接的随 ...

  10. SpringMVC 快速入门

    SpringMVC 快速入门 SpringMVC 简介 SpringMVC是 Spring为展示层提供的基于Web MVC设计模式的请求驱动类型的轻量级Web框架,它的功能和Struts2一样.但比S ...