ExtJS4 MVC开发教程：搭建开发环境
原文地址:http://www.lihuai.net/qianduan/extjs/864.html
博主系列教程:http://www.lihuai.net/qianduan/extjs
在所有的JS框架中，ExtJS算的上是一个超重量级的前端框架，里面封装了大量的类库以至于很多刚开始接触ExtJS的朋友们不知如何下手，即便 是很多人看着别人的demo能够用ExtJS写出自己的Hello Word程序，却对里面的架构不知所以然，针对这种情况，在ExtJS MVC开发教程中主要从以下几个方面为大家讲解如何用MVC模式搭建自己的ExtJS项目应用：
- 1.搭建ExtJS4开发环境
- 2.ExtJS4 入口文件（app.js）详解
- 3.ExtJS4 Controller详解
- 4.ExtJS4 如何定义自己的视图类
- 5.ExtJS4 Store和Model详解
首先来分析如何搭建应用环境，我们主要从以下几个方面说明：
1.项目的基本结构
appname：项目的根目录，包含项目的所有文件；
app：应用目录，该文件夹包含你开发的所有类文件；
extjs：extjs源码包；
resource：放置额外资源文件（图片、css文件等）；
app.js：ExtJS入口文件，控制整个应用的逻辑结构；
index.html：项目入口点。
如果对于我的解释仍不能让你明白每个文件夹究竟是做什么的，那么不必担心，在刚开始我们并不是用到所有的文件，对于一个简单的应用，我们只需要用到以下的项目结构即可：
2.制作入口文件
打开index.html文件，添加以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>应用首页</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="ext-4.2.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css"
href="ext-4.2.1/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body> </body>
</html>
ext-all.css：该文件是ExtJS的css文件，必须加载；
ext-all.js：ExtJS的核心类库，必须加载（稍后我们还会详细讲解该文件）；
app.js：从这里开始我们的ExtJS应用开发。
准备好以上这些以后，我们就可以着手开始我们的ExtJS开发工作了，打开app.js文件，添加以下代码：
Ext.application({
name : 'demo', // 命名空间
launch : function() {
Ext.create('Ext.container.Viewport', {
layout : 'fit',
items : [{
title : 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}]
});
}
})
打开浏览器，访问index.html，我们的Hello! Welcome to Ext JS.就在眼前！！
最新文章
- ASP.NET Web API路由系统：路由系统的几个核心类型
- .htaccess详解及.htaccess参数说明【转】
- paip.重装系统需要备份的资料总结..v2.0 cad
- Sprint(第一天11.14)
- cc.RepeatForever和cc.Spawn冲突
- win7家庭版任务栏预览消失，只显文字终极解决法
- requestAnimationFrame 兼容处理
- Javascript进阶篇——(DOM—getAttribute()、setAttribute()方法)—笔记整理
- unicode下一个，读取数据库乱码问题
- 读书笔记—CLR via C#反射
- [SQL基础教程] 1-5 表的删除和更新
- 【Flex】编辑器的缩放功能（绝对定位和相对定位）
- 201521123115《java程序设计》第十一周学习总结
- org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.coder520.mamabike.user.dao.UserMapper.selectByPrimaryKey
- 【WebApi系列】浅谈HTTP在WebApi开发中的运用
- [ZJOI2018]历史
- pycharm添加版本控制
- October 27th, 2017 Week 43rd Friday
- 使用 Python 在 Linux 上实现一键回归测试
- Kibana 基础入门