我们的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. JavaScript 语言精粹读书笔记

    最近在看 赵泽欣 / 鄢学鹍 翻译的 蝴蝶书, 把一些读后感言记录在这里. 主要是把作者的建议跟 ES5/ES5.1/ES6 新添加的功能进行了对比 涉及到的一些定义 IIFE: Immediatel ...

  2. ajax请求发送和页面跳转的冲突

    http://blog.csdn.net/allenliu6/article/details/77341538?locationNum=7&fps=1 在A页面中,有一个click事件,点击时 ...

  3. 二叉搜索树的第 k 个结点

    题目 给定一颗二叉搜索树,请找出其中的第k小的结点,即将二叉树中所有元素从小到大排序的第 k 个结点. 解析 按中序遍历二叉搜索树就可以获得一个非递减的序列,此时第 k 个就为答案.实际上我们只需要按 ...

  4. linux 安装wordpress 无故往外发送大量垃圾邮件

    linux 安装wordpress 无故往外发送大量垃圾邮件 始末 表现出来的现象就是, 网站运行没多久,mysql服务就挂了,重启也无法启动起来,提示 No such file or dicrion ...

  5. VS2013创建Windows服务

    一.创建服务 1.文件->新建->项目->windows桌面->windows服务,修改你要的项目名称.我这不改名,仍叫WindowsService1,确定. 2.其中的Pro ...

  6. github创建远程仓库

    创建远程仓库 当你已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作,真是一 ...

  7. java中的内存溢出和内存泄漏

    内存溢出:对于整个应用程序来说,JVM内存空间,已经没有多余的空间分配给新的对象.所以就发生内存溢出. 内存泄露:在应用的整个生命周期内,某个对象一直存在,且对象占用的内存空间越来越大,最终导致JVM ...

  8. Vim自动补全神器YouCompleteMe的配置

    简介:YouCompleteMe号称Vim的自动补全神器,该项目在github的地址:YouCompleteMe:以下在10.0.1 build-1379776平台配置完成 插件安装操作: 1.确保V ...

  9. x01.AntWorld: An Python AI Game

    1. 学习了一下 AI 五子棋,顺手改作 19 路的棋盘,便于围棋通用.render.py 主要修改如下: # 常量部分: IMAGE_PATH = 'img/' StoneSize = 32 WID ...

  10. 照虎画猫写自己的Spring

    从细节跳出来 看了部分Spring的代码,前面用了四篇内容写了一些读书笔记. 回想起来,论复杂度,Spring够喝上好几壶的.他就像一颗枝繁叶茂的大树,远处看,只是一片绿:走近看,他为你撑起一片小天地 ...