原文地址: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开发教程：搭建开发环境的更多相关文章

  1. Xamarin Anroid开发教程之验证环境配置是否正确

    Xamarin Anroid开发教程之验证环境配置是否正确 经过前面几节的内容已经把所有的编程环境设置完成了,但是如何才能确定所有的一切都处理争取并且没有任何错误呢?这就需要使用相应的实例来验证,本节 ...

  2. 智龙开发板搭建llsp环境

    智龙开发板搭建llsp(linux+lighttpd+sqlite3+php)环境 1. 准备 1. 智龙开发板V3 2. 软件编译环境:VirtualBox6+CentOS6.10-i386.min ...

  3. Window上python 开发--1.搭建开发环境

    事实上在开发python最好在ubuntu环境下,简单也便于扩展各个package.可是我的linux的电脑临时不在身边.还的我老婆的电脑win7没办法啊. 因为python的跨平台性.在window ...

  4. 开发工具--搭建python环境

    工具|搭建python环境 实现python2版本与python3版本的环境搭建. 正文 1.Python下载 官网: www.python.org 下载: ( 64位3.5.2Windows x86 ...

  5. 勤拂拭软件 java web 开发教程(1) - 开发环境搭建

    勤拂拭软件系列教程 之 Java Web开发之旅(1) Java Web开发环境搭建 1 前言 工作过程中,遇到不少朋友想要学习jsp开发,然而第一步都迈不出,连一个基本的环境都没有,试问,如何能够继 ...

  6. java web 开发教程(1) - 开发环境搭建

    勤拂拭软件系列教程 之 Java Web开发之旅(1) Java Web开发环境搭建 1 前言 工作过程中,遇到不少朋友想要学习jsp开发,然而第一步都迈不出,连一个基本的环境都没有,试问,如何能够继 ...

  7. pyqt开发教程-搭建环境和开发示例

    搭建环境和开发示例 * 安装 安装包 要对应python的版本 32位安装包(我PC上) http://jaist.dl.sourceforge.net/project/pyqt/PyQt4/PyQt ...

  8. Android开发教程之【环境搭建及HelloWorld】（转载）

    引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方,还望不吝赐教. 在开始A ...

  9. 新唐N32905U1DN开发教程：MDK环境下工程搭建(官方提供的固件库)（转）

    前言:新唐N32905U1DN单片机不支持用户将程序烧录到内部FLASH,必须外挂FLASH存储用户程序,可以是SPI FLASH.NAND FLASH.SD卡.用户采用裸机开发的方式可使用官方提供的 ...

  10. Android开发学习——搭建开发环境

    在学校开课学习了android的一些简单的UI组件,布局,四大组件学习了2个,数据存储及网络通信,都是一些简单的概念,入门而已.许多东西需要自己去学习. 学习一下 Android开发环境的搭建,两种方 ...

随机推荐

  1. 如何在UINavigationBar上添加UISearchBar以及UISearchDisplayController的使用 --OC --iOS

    那我们开始吧,下面是Sely写的一个Demo,分享给大家. 新建一个项目, UISearchDisplayController 的 displaysSearchBarInNavigationBar太死 ...

  2. ios开发：GCD多线程

    ios有三种多线程编程技术,分别是NSThread,Cocoa NSOperation和GCD,GCD全称Grand Central Dispatch 是Apple开发的一个多核编程的解决方法,在iO ...

  3. ASP.NET WEB API 初探

    本文初步介绍如何简单创建一个ASP.NET Web Api 程序. Web Api 顾名思义就是一个Api接口,客户端可调用此接口进行业务操作.此类应用与 ASP.NET  web服务(即使用扩展名. ...

  4. (转)MSSQL 各个发行版本版本号以及Compact 版本号

    终于开始写博客了. 不要笑啊. 下面是MSSQL 的发行版本以及版本号.自己整理的. http://support.microsoft.com/kb/321185/zh-cn SQL Server 2 ...

  5. 40个容易上瘾的HTML5网页游戏,总有一款适合你

    我记得姐姐家的孩子在刚刚才学会走路,说话还不能完整的时候就已经能自己用小手点出小游戏的网站来一个人自娱自乐.我一直在想这一代跟着计算机一起茁壮成长的孩子会不会也和美国那一代人一样,出现9岁的黑客和计算 ...

  6. Mysql 的安装与配置

    MySQL的安装 第1步:下载 第2 步:以管理员身份进行安装 第3步:选择安装类型. 第4步:设置MySQL安装目录,及数据库文件目录 第5步:安装结束,开启配置向导 第6步:选择配置类型 第7步: ...

  7. Eclipse JavaEE设置内置浏览器和外部浏览器

    Eclipse JavaEE设置内置浏览器和外部浏览器 我们在使用Java EE版本的Eclipse开发Java Web程序时,Eclipse会有一个默认的内置浏览器查看网页的效果,如下图 但是内置浏 ...

  8. debian 学习记录-1 -安装

    之前装ubuntu12. 后来没有继续用,图形界面很不错,没有继续学习原因很多: · 没有基础知识支持(拷贝文件都是用鼠标拖动的) · 图形界面很好,导致没有使用命令行,安装驱动什么的都是靠鼠标点击 ...

  9. 【CLR VIA C#】读书笔记

    工作几年了才看,记录下笔记备忘. 章节 笔记 1.CLR的执行模型 公共语言运行时(Common Language Runtime,CLR) 源代码-->编译器检查语法和分析源代码-->托 ...

  10. PHP中CURL技术模拟登陆抓取网站信息，用与微信公众平台成绩查询

    伴随微信的红火,微信公众平台成为许多开发者的下一个目标.笔者本身对于这种新鲜事物没有如此多的吸引力.但是最近有朋友帮忙开发微信公众平台中一个成绩查询的功能.于是便在空余时间研究了一番. 主要的实现步骤 ...