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.就在眼前！！
ExtJS4 MVC开发教程：搭建开发环境的更多相关文章
- Xamarin Anroid开发教程之验证环境配置是否正确
Xamarin Anroid开发教程之验证环境配置是否正确 经过前面几节的内容已经把所有的编程环境设置完成了,但是如何才能确定所有的一切都处理争取并且没有任何错误呢?这就需要使用相应的实例来验证,本节 ...
- 智龙开发板搭建llsp环境
智龙开发板搭建llsp(linux+lighttpd+sqlite3+php)环境 1. 准备 1. 智龙开发板V3 2. 软件编译环境:VirtualBox6+CentOS6.10-i386.min ...
- Window上python 开发--1.搭建开发环境
事实上在开发python最好在ubuntu环境下,简单也便于扩展各个package.可是我的linux的电脑临时不在身边.还的我老婆的电脑win7没办法啊. 因为python的跨平台性.在window ...
- 开发工具--搭建python环境
工具|搭建python环境 实现python2版本与python3版本的环境搭建. 正文 1.Python下载 官网: www.python.org 下载: ( 64位3.5.2Windows x86 ...
- 勤拂拭软件 java web 开发教程(1) - 开发环境搭建
勤拂拭软件系列教程 之 Java Web开发之旅(1) Java Web开发环境搭建 1 前言 工作过程中,遇到不少朋友想要学习jsp开发,然而第一步都迈不出,连一个基本的环境都没有,试问,如何能够继 ...
- java web 开发教程(1) - 开发环境搭建
勤拂拭软件系列教程 之 Java Web开发之旅(1) Java Web开发环境搭建 1 前言 工作过程中,遇到不少朋友想要学习jsp开发,然而第一步都迈不出,连一个基本的环境都没有,试问,如何能够继 ...
- pyqt开发教程-搭建环境和开发示例
搭建环境和开发示例 * 安装 安装包 要对应python的版本 32位安装包(我PC上) http://jaist.dl.sourceforge.net/project/pyqt/PyQt4/PyQt ...
- Android开发教程之【环境搭建及HelloWorld】（转载）
引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方,还望不吝赐教. 在开始A ...
- 新唐N32905U1DN开发教程：MDK环境下工程搭建(官方提供的固件库)（转）
前言:新唐N32905U1DN单片机不支持用户将程序烧录到内部FLASH,必须外挂FLASH存储用户程序,可以是SPI FLASH.NAND FLASH.SD卡.用户采用裸机开发的方式可使用官方提供的 ...
- Android开发学习——搭建开发环境
在学校开课学习了android的一些简单的UI组件,布局,四大组件学习了2个,数据存储及网络通信,都是一些简单的概念,入门而已.许多东西需要自己去学习. 学习一下 Android开发环境的搭建,两种方 ...
随机推荐
- javascript笔记——图片大小检测
<html> <head> <script type="text/javascript"> var isIE = /msie/i.test(na ...
- Java中浮点数的基础知识
偶然查看Math.round的JDK public static int round(float a) { if (a != 0x1.fffffep-2f) // greatest float val ...
- 模板：strncpy函数
参考链接:http://baike.baidu.com/view/1207711.htm strncpy 是 C语言的函数之一,来自 C语言标准库,定义于 string.h,char *strncpy ...
- 使用MySQL数据库将汉字转换成拼音的一个C语言小程序
环境: mysql:mysql-5.1.65 centos:centos 6.5 编译命令: gcc -o chinesetopinyin chinesetopinyin.c -L/usr/lib/m ...
- Android Wear预览版——尝鲜
前两天Google推出了Android Wear的SDK,稍稍的瞧了一眼,发现这个预览版的功能还是比较简单的,只有一个通知转发的功能,不过就这么一个功能,带来的效果却是Very Good~~ 功能:发 ...
- shell脚本编程之for语句、if语句使用介绍
介绍了shell脚本编程之for语句.if语句的使用方法. 上部: 面向过程: 顺序执行 选择执行: if, case 循环执行: for, while, until 一.for语句 格式: ...
- 我用的一些Node.js开发工具、开发包、框架等总结
开发工具 1.WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢. 2.做些小型项目用Sublime Text. 3.Browser ...
- Catalyst揭秘 Day8 Final 外部数据源和缓存系统
Catalyst揭秘 Day8 Final 外部数据源和缓存系统 今天是Catalyst部分的收官,主要讲一些杂项内容. 外部数据源处理 什么叫外部数据源,是SparkSql自己支持的一些文件格式,以 ...
- C++ STL中迭代器失效的问题
my_container.erase(iter); 其中my_container是STL的某种容器,iter是指向这个容器中某个元素的迭代器.如果不是在for,while循环中,这种方式删除元素没有问 ...
- esp8266的STM32驱动
esp8266的STM32驱动,数据发送接收由DMA完成,释放CPU. 目前只能发送返回消息为成功或失败的AT命令,并判断是否成功,详见esp8266_cmd():其它返回消息不可预知的命令(如查看A ...